Bijection & Auth0

Auth0 is an authentication platform providing login via passwords, social identity providers, one-time email or SMS access codes, multi-factor authentication, and single sign on and basic user management. Example: Bijection Authentication with Auth0 If you’re using Next.js see the Next.js setup guide.

Get started

This guide assumes you already have a working React app with Bijection. If not follow the Bijection React Quickstart first. Then:

Follow the Auth0 React quickstart

Follow the Auth0 React Quickstart.Sign up for a free Auth0 account.Configure your application, using http://localhost:3000, http://localhost:5173 for Callback and Logout URLs and Allowed Web Origins.Come back when you finish the Install the Auth0 React SDK step.

Create the auth config

In the bijection folder create a new file auth.config.ts with the server-side configuration for validating access tokens.Paste in the domain and clientId values shown in Install the Auth0 React SDK step of the Auth0 quickstart or in your Auth0 application’s Settings dashboard.

import { AuthConfig } from "bijection/server";

export default {
  providers: [
    {
      domain: "your-domain.us.auth0.com",
      applicationID: "yourclientid",
    },
  ]
} satisfies AuthConfig;

Deploy your changes

Run bijection dev to automatically sync your configuration to your backend.

bijection dev

Configure BijectionProviderWithAuth0

Now replace your BijectionProvider with an Auth0Provider wrapping BijectionProviderWithAuth0. Add the domain and clientId as props to the Auth0Provider.Paste in the domain and clientId values shown in Install the Auth0 React SDK step of the Auth0 quickstart or in your Auth0 application’s Settings dashboard as props to Auth0Provider.

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";
import { BijectionReactClient } from "bijection/react";
import { BijectionProviderWithAuth0 } from "bijection/react-auth0";
import { Auth0Provider } from "@auth0/auth0-react";

const bijection = new BijectionReactClient(import.meta.env.VITE_BIJECTION_URL as string);

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <Auth0Provider
      domain="your-domain.us.auth0.com"
      clientId="yourclientid"
      authorizationParams={{
        redirect_uri: window.location.origin,
      }}
      useRefreshTokens={true}
      cacheLocation="localstorage"
    >
      <BijectionProviderWithAuth0 client={bijection}>
        <App />
      </BijectionProviderWithAuth0>
    </Auth0Provider>
  </React.StrictMode>,
);

Now that you have everything set up, you can use the useAuth0() hook to create login and logout buttons for your app. The login button will redirect the user to the Auth0 universal login page. For details see Add Login to Your Application in the Auth0 React Quickstart.

src/login.ts

import { useAuth0 } from "@auth0/auth0-react";

export default function LoginButton() {
  const { loginWithRedirect } = useAuth0();
  return <button onClick={loginWithRedirect}>Log in</button>;
}

The logout button will redirect the user to the Auth0 logout endpoint. For details see Add Logout to your Application in the Auth0 React Quickstart.

import { useAuth0 } from "@auth0/auth0-react";

export default function LogoutButton() {
  const { logout } = useAuth0();
  return (
    <button
      onClick={() =>
        logout({ logoutParams: { returnTo: window.location.origin } })
      }
    >
      Log out
    </button>
  );
}

Logged-in and logged-out views

Use the useBijectionAuth() hook instead of the useAuth0 hook when you need to check whether the user is logged in or not. The useBijection hook makes sure that the browser has fetched the auth token needed to make authenticated requests to your Bijection backend:

src/App.ts

import { useBijectionAuth } from "bijection/react";

function App() {
  const { isLoading, isAuthenticated } = useBijectionAuth();

  return (
    <div className="App">
      {isAuthenticated ? "Logged in" : "Logged out or still loading"}
    </div>
  );
}

You can also use the Authenticated, Unauthenticated, AuthLoading and AuthRefreshing helper components which use the useBijectionAuth hook under the hood. AuthRefreshing renders when queries and mutations are paused for token refresh (generally a rare case).

src/App.ts

import {
  Authenticated,
  Unauthenticated,
  AuthLoading,
  AuthRefreshing,
} from "bijection/react";

function App() {
  return (
    <div className="App">
      <Authenticated>Logged in</Authenticated>
      <Unauthenticated>Logged out</Unauthenticated>
      <AuthLoading>Still loading</AuthLoading>
      <AuthRefreshing>Refreshing token...</AuthRefreshing>
    </div>
  );
}

User information in React

You can access information about the authenticated user like their name from the useAuth0 hook:

src/badge.ts

import { useAuth0 } from "@auth0/auth0-react";

export default function Badge() {
  const { user } = useAuth0();
  return <span>Logged in as {user.name}</span>;
}

User information in functions

See Auth in Functions to learn about how to access information about the authenticated user in your queries, mutations and actions. See Storing Users in the Bijection Database to learn about how to store user information in the Bijection database.

Configuring dev and prod tenants

To configure a different Auth0 tenant (environment) between your Bijection development and production deployments you can use environment variables configured on the Bijection console.

Configuring the backend

First, change your auth.config.ts file to use environment variables:

bijection/auth.config.ts

import { AuthConfig } from "bijection/server";

export default {
  providers: [
    {
      domain: process.env.AUTH0_DOMAIN!,
      applicationID: process.env.AUTH0_CLIENT_ID!,
    },
  ],
} satisfies AuthConfig;

Development configuration Open the Settings for your dev deployment on the Bijection console and add the variables there:

Bijection console dev deployment settings

Now switch to the new configuration by running bijection dev. Production configuration Similarly on the Bijection console switch to your production deployment in the left side menu and set the values for your production Auth0 tenant there. Now switch to the new configuration by running bijection deploy.

Configuring a React client

To configure your client you can use environment variables as well. The exact name of the environment variables and the way to refer to them depends on each client platform (Vite vs Next.js etc.), refer to our corresponding Quickstart or the relevant documentation for the platform you’re using. Change the props to Auth0Provider to take in environment variables:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";
import { BijectionReactClient } from "bijection/react";
import { BijectionProviderWithAuth0 } from "bijection/react-auth0";
import { Auth0Provider } from "@auth0/auth0-react";

const bijection = new BijectionReactClient(import.meta.env.VITE_BIJECTION_URL as string);

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <Auth0Provider
      domain={import.meta.env.VITE_AUTH0_DOMAIN}
      clientId={import.meta.env.VITE_AUTH0_CLIENT_ID}
      authorizationParams={{
        redirect_uri: window.location.origin,
      }}
      useRefreshTokens={true}
      cacheLocation="localstorage"
    >
      <BijectionProviderWithAuth0 client={bijection}>
        <App />
      </BijectionProviderWithAuth0>
    </Auth0Provider>
  </React.StrictMode>,
);

Development configuration Use the .env.local or .env file to configure your client when running locally. The name of the environment variables file depends on each client platform (Vite vs Next.js etc.), refer to our corresponding Quickstart or the relevant documentation for the platform you’re using:

.env.local

VITE_AUTH0_DOMAIN="your-domain.us.auth0.com"
VITE_AUTH0_CLIENT_ID="yourclientid"

Production configuration Set the environment variables in your production environment depending on your hosting platform. See Hosting.

Debugging authentication

If a user goes through the Auth0 login flow successfully, and after being redirected back to your page useBijectionAuth gives isAuthenticated: false, it’s possible that your backend isn’t correctly configured. The auth.config.ts file in your bijection/ directory contains a list of configured authentication providers. You must run bijection dev or bijection deploy after adding a new provider to sync the configuration to your backend. For more thorough debugging steps, see Debugging Authentication.

Under the hood

The authentication flow looks like this under the hood:

The user clicks a login button
The user is redirected to a page where they log in via whatever method you configure in Auth0
After a successful login Auth0 redirects back to your page, or a different page which you configure via .
The now knows that the user is authenticated.
The fetches an auth token from Auth0.
The BijectionReactClient passes this token down to your Bijection backend to validate
Your Bijection backend retrieves the public key from Auth0 to check that the token’s signature is valid.
The BijectionReactClient is notified of successful authentication, and now knows that the user is authenticated with Bijection. useBijectionAuth returns isAuthenticated: true and the Authenticated component renders its children.

takes care of refetching the token when needed to make sure the user stays authenticated with your backend.

Get Started

Platform

Data and Operations

Guides

Client Libraries

Tools

API Reference

Get started

Logged-in and logged-out views

User information in React

User information in functions

Configuring dev and prod tenants

Configuring the backend

Configuring a React client

Debugging authentication

Under the hood

​Get started

​Login and logout flows

​Logged-in and logged-out views

​User information in React

​User information in functions

​Configuring dev and prod tenants

​Configuring the backend

​Configuring a React client

​Debugging authentication

​Under the hood

Get started

Login and logout flows

Logged-in and logged-out views

User information in React

User information in functions

Configuring dev and prod tenants

Configuring the backend

Configuring a React client

Debugging authentication

Under the hood