Generate 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';

// The values you retrieved from console.cord.com
// This code will not work until you've replaced these
// values with your own.
const CORD_PROJECT_ID = 'YOUR_CORD_PROJECT_ID';
const CORD_SECRET = 'YOUR_CORD_SECRET';

// Note:
// It's a best practice to use environment variables rather than hard-coding
// project 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_PROJECT_ID,
    CORD_SECRET,
    {
      // The ID of the user we created with the CLI tool
      user_id: 'cordymccordface',
    },
  );

  // 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 groupId="my-first-group" />
        </header>
        <p>Let's get Cord-y!</p>
        <Thread threadId="a-first-conversation" groupId="my-first-group" />
      </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 →

Not finding the answer you need? Ask our Developer Community

Ask Cordy

Generate an Auth Token

Tell Cord about your user on the backend #

NodeJS:

Golang:

Java:

REST:

Fetch the token on the client #

React:

Vanilla JavaScript:

Confirm your token is working #

Try multiple users #