Session Strategies
Auth0 Strategy

Auth0 Strategy

The Auth0 strategy is used to authenticate users against an Auth0 account. It extends the OAuth2Strategy.

Supported runtimes

RuntimeHas Support
Node.js✅
Cloudflare✅

Setup Guide

Create an Auth0 tenant

Follow the steps on the Auth0 documentation (opens in a new tab) to create a tenant and get a client ID, client secret and domain.

Install the package

npm install remix-auth-auth0

Create the strategy instance

app/utils/auth.server.ts
import { Authenticator } from "remix-auth";
import { Auth0Strategy } from "remix-auth-auth0";
 
// Create an instance of the authenticator, pass a generic with what your
// strategies will return and will be stored in the session
export const authenticator = new Authenticator<User>(sessionStorage);
 
let auth0Strategy = new Auth0Strategy(
  {
    callbackURL: "https://example.com/auth/auth0/callback",
    clientID: "YOUR_AUTH0_CLIENT_ID",
    clientSecret: "YOUR_AUTH0_CLIENT_SECRET",
    domain: "YOUR_TENANT.us.auth0.com",
  },
  async ({ accessToken, refreshToken, extraParams, profile }) => {
    // Get the user data from your DB or API using the tokens and profile
    return User.findOrCreate({ email: profile.emails[0].value });
  }
);
 
authenticator.use(auth0Strategy);

Setup your routes

app/routes/login.tsx
export default function Login() {
  return (
    <Form action="/auth/auth0" method="post">
      <button>Login with Auth0</button>
    </Form>
  );
}
app/routes/auth/auth0/callback.tsx
import type { LoaderArgs } from "@remix-run/node";
 
import { authenticator } from "~/utils/auth.server";
 
export let loader = ({ request }: LoaderArgs) => {
  return authenticator.authenticate("auth0", request, {
    successRedirect: "/dashboard",
    failureRedirect: "/login",
  });
};
app/routes/auth/logout.ts
import type { ActionArgs } from "@remix-run/node";
 
import { redirect } from "@remix-run/node";
 
import { destroySession, getSession } from "~/utils/auth.server";
 
export const action = async ({ request }: ActionArgs) => {
  const session = await getSession(request.headers.get("Cookie"));
  const logoutURL = new URL(process.env.AUTH0_LOGOUT_URL); // i.e https://YOUR_TENANT.us.auth0.com/v2/logout
 
  logoutURL.searchParams.set("client_id", process.env.AUTH0_CLIENT_ID);
  logoutURL.searchParams.set("returnTo", process.env.AUTH0_RETURN_TO_URL);
 
  return redirect(logoutURL.toString(), {
    headers: {
      "Set-Cookie": await destroySession(session),
    },
  });
};

Advanced Usage

Link directly to signup

app/routes/register.tsx
export default function Register() {
  return (
    <Form action="/auth/auth0?screen_hint=signup" method="post">
      <button>Register with Auth0</button>
    </Form>
  );
}
 
// https://auth0.com/docs/authenticate/login/auth0-universal-login/new-experience#signup
Email Link StrategyMicrosoft Strategy