Initialize Cord

Get Cord up and running in the browser


Now that you've got the Cord SDK installed, the next step is to initialize Cord in your page. For React applications, this means adding the <CordProvider /> component.

Initialize Cord

We recommend you wrap the root of your application with the <CordProvider />. This way you can use Cord components anywhere in your application.

// In your create-react-app project, you can replace src/App.js with
// the following:
import { CordProvider } from "@cord-sdk/react";

function App() {

  // TODO: This is a sample token that will expire in 24h. To implement Cord
  // fully, you need to generate tokens in your backend and send them to the
  // client.
  //   See https://docs.cord.com/in-depth/authentication and
  //     https://docs.cord.com/reference/server-libraries for more information.
  return (
    <CordProvider clientAuthToken="<CLIENT_AUTH_TOKEN>">
      <div style={{ flex: 1 }}>
        <div style={{ margin: '0 auto', maxWidth: '500px' }}>
          <header style={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center'
          }}>
            <h1>Hello World!</h1>
          </header>
          <p>Let's get Cord-y!</p>
        </div>
      </div>
    </CordProvider>
  );
}

export default App;
Copy

Check that the SDK is initialized

In the developer console of your browser, run the following code:

console.log(window.CordSDK.accessToken);
Copy

If everything is working as expected, you should see output that looks something like this:

Chrome developer console output of an access token