Create an Auth Token

Get your user authenticated by creating a JSON Web Token (JWT) for them

Cord authentication works alongside your existing authentication mechanisms. When integrating Cord, you'll need to configure your backend to tell your frontend who the user is by generating a Cord client authentication token.

Your client will send your server a cookie or whatever authentication means your application uses. Cord's client will send the Cord client authentication token to our servers.

You can generate this token on your server and pass it to your client either when they load a page or by creating an API endpoint for them.

Tell Cord about your user on the backend #

The code below sets up a very basic server-side endpoint allowing you to send a client auth token to a user loading Cord in your page.

import express from 'express';
import { getClientAuthToken } from '@cord-sdk/server';

// You can retrieve these values from console.cord.com
// This code will not work until you've replaced these
// values with your own.
const CORD_APPLICATION_ID = 'YOUR_CORD_APPLICATION_ID';
const CORD_SECRET = 'YOUR_CORD_SECRET';

// Note:
// It's a best practice to use environment variables rather than hard-coding
// application secrets. This example code is just to get you up and running as
// fast as possible. In production, you should use something like
// https://www.npmjs.com/package/dotenv to load your environment variables.

const app = express();
const PORT = 3337;

app.get('/generate-cord-token', function generateCordToken(req, res) {

  const clientAuthToken = getClientAuthToken(
    CORD_APPLICATION_ID,
    CORD_SECRET,
    {
      // The user ID can be any identifier that makes sense to your application.
      // As long as it's unique per-user, Cord can use it to represent your user.
      user_id: 'severusatreides',

      // Same as above. An organization ID can be any unique string. Organizations
      // are groups of users.
      organization_id: 'starpotterdunewars',

      // By supplying the  `user_details` object, you can create the user in
      // Cord's backend on-the-fly. No need to pre-sync your users.
      user_details: {
        email: 'sevvy@arrakis.spice',
        name: 'Severus Atreides',
      },

      // By supplying the `organization_details` object, just like the user,
      // Cord will create the organization on-the-fly.
      organization_details: {
        name: "starpotterdunewars",
      },
    },
  );

  // You only need this line if you're running this locally with the vite
  // example project.
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:5173');

  res.setHeader('Content-Type', 'application/json');
  res.status(200);
  res.send(JSON.stringify({ clientAuthToken }));
});

app.listen(PORT, () => {
  console.log(`Cord example app listening on port ${PORT}`);
});

Copy

From here, you'll need to send this server-generated auth token to the client.

Fetch the token on the client #

In your client-side application, you'll need to fetch the token you've generated

import { useState, useEffect } from 'react';

import { CordProvider, PagePresence, Thread } from "@cord-sdk/react";

function App() {

  const [ cordToken, setCordToken ] = useState(undefined);

  useEffect(() => {
    (async () => {
      try {
        // Change this to wherever your server is running.
        const server = 'http://localhost:3337';
        const response = await fetch(`${server}/generate-cord-token`);
        const data = await response.json();
        setCordToken(data.clientAuthToken);
      } catch (error) {
        console.log('Something went wrong!: ', error);
      }
    })();
  }, [setCordToken]);

  return (
    <CordProvider clientAuthToken={cordToken}>
      <div style={{ margin: '0 auto', maxWidth: '500px' }}>
        <header style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center'
        }}>
          <h1>Hello World!</h1>
          <PagePresence />
        </header>
        <p>Let's get Cord-y!</p>
        <Thread threadId="a-first-conversation" />
      </div>
    </CordProvider>
  );
}

export default App;

Copy

Confirm your token is working #

When you load the page now, you should see something similar to this:

Screenshot of Cord with an authenticated user

Try multiple users #

In the next step, we'll tweak this code to support multiple test users →

Ask Cordy