Sign up for Tesseral

Go to https://console.tesseral.com and sign up. At a step in the flow, you’ll be asked to Create a Project.

You can change your choices here later. The important thing is:

• Production App URL is the URL where your production app lives.

  Typically, this is something like https://app.company.com (sometimes app. is instead something like console. or dashboard.), but some applications put it on https://company.com. Put whatever style you use; Tesseral supports them all.

• Development App URL is the URL where your app lives when you’re developing on it locally.

  Choose something like http://localhost:3000. If you have a setup where you run live previews on some kind of preview URL, then you can add those later. Start by adding just your localhost domain.

After you complete this step, Tesseral will automatically create two Tesseral Projects for you: a production Project and a development Project (whose name ends in “Dev”).

You’ll be logged into your development Project. You can switch between your Projects from the Project Switcher at the top left of the Console.

Add Tesseral to your clientside code

Tesseral’s React SDK handles redirecting users to your login page, giving your React code hooks like useUser() or useLogout(), and having your frontend automatically send authentication information in its requests to your server.

$
npm install @tesseral/tesseral-react

1
import { createRoot } from "react-dom/client";
2
import { TesseralProvider } from "@tesseral/tesseral-react";
3
4
const root = createRoot(...);
5
root.render(
6
  // use the publishable_key_... you got in Step 2
7
  <TesseralProvider publishableKey="publishable_key_...">
8
    <App />
9
  </TesseralProvider>
10
);

Add Tesseral to your serverside code

Tesseral provides SDKs for Express.js, Flask, and Golang. You’ll need the Publishable Key you created previously.

$
npm install @tesseral/tesseral-express

1
import express from "express";
2
import { requireAuth } from "@tesseral/tesseral-express";
3
4
const app = express();
5
6
// before
7
// app.listen(...)
8
9
// after
10
app.use(
11
  requireAuth({
12
    publishableKey: "publishable_key_...",
13
  }),
14
);
15
16
app.listen(8080, "localhost", () => {
17
  console.log("Listening on http://localhost:8080");
18
});

1
import { organizationId } from "@tesseral/tesseral-express";
2
3
app.get("/", (req, res) => {
4
  console.log(`you work for ${organizationId(req)}`)
5
});

Going to Production

In the previous two sections, you added authentication to your frontend and backend. Both of these were running on localhost. To go to production, you need to:

1. Use your production publishable keys, instead of the dev ones you’ve used so far. This is the only code change you need to make.

2. Go into the Tesseral Console, and configure a custom domain for your Project’s Vault. Right now, your production Project uses a Tesseral-assigned URL that looks like project-[...].tesseral.app.

   In production, you will a domain you control instead of one Tesseral provides for you. You’ll use a domain that looks like vault.app.company.com or vault.company.com, depending on whether you use app.company.com or company.com as your App Production URL.

Here is how you configure a custom domain for your Project’s Vault:

1. Go to the Tesseral Console. Click on the Project Switcher at the top left, and click on your production Project (it’s the one whose name doesn’t end in “Dev”).

2. Go to Project Settings, and then the “Vault Domain Settings” tab. Click on “Edit”, and under “Custom Vault Domain” you’ll input vault.XXX, where XXX is the domain of your App Production URL that you used in “Sign up for Tesseral” above.

   For example, if you used https://app.company.com, then use vault.app.company.com as your production Project’s Vault Domain.

   If instead you used https://company.com (no app. or console. or dashboard.-like subdomain), then use vault.company.com as your production Project’s Vault Domain.

3. You’ll now get a set of DNS records you need to set up. Create those DNS records. Once those records are all correct and widely propagated, you can enable your Custom Vault Domain.

Now, when your customers are redirected to their login page, they’ll see vault.app.company.com. You can also Customize the look here to make the experience seamless with your company’s brand.