Cord LogoDocs
Sign inStart now

Initialize Cord

Integration guide /
Ask the Community

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.

React:
// 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 create users and groups in Cord, generate tokens in your
  // backend and send them to the client.
  // See https://docs.cord.com/rest-apis, 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;
Vanilla JavaScript:
<!-- Add this script tag to your application -->
<script>
// TODO: This is a sample token that will expire in 24h. To implement Cord
// fully, you need to create users and groups in Cord, generate tokens in your
// backend and send them to the client.
// See https://docs.cord.com/rest-apis, https://docs.cord.com/in-depth/authentication
// and https://docs.cord.com/reference/server-libraries for more information.
  window.CordSDK.init({
    client_auth_token: "<CLIENT_AUTH_TOKEN>",
  });
</script>

// 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 create users and groups in Cord, generate tokens in your
  // backend and send them to the client.
  // See https://docs.cord.com/rest-apis, 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:

JavaScript:
console.log(window.CordSDK.accessToken);
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

Not finding the answer you need? Ask our Developer Community

Ask Cordy