Auth0

Identity platform for authentication and authorization.

When to Use

• Managed authentication
• Social login integration
• Enterprise SSO
• Multi-factor authentication

Quick Start

import { Auth0Client } from "@auth0/auth0-spa-js";

const auth0 = new Auth0Client({
  domain: "your-tenant.auth0.com",
  clientId: "your-client-id",
  authorizationParams: {
    redirect_uri: window.location.origin,
  },
});

await auth0.loginWithRedirect();

Core Concepts

React Integration

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

function App() {
  return (
    <Auth0Provider
      domain="your-tenant.auth0.com"
      clientId="your-client-id"
      authorizationParams={{
        redirect_uri: window.location.origin,
        audience: "https://api.example.com",
      }}
    >
      <MainApp />
    </Auth0Provider>
  );
}

function Profile() {
  const { user, isAuthenticated, loginWithRedirect, logout } = useAuth0();

  if (!isAuthenticated) {
    return <button onClick={loginWithRedirect}>Log In</button>;
  }

  return (
    <div>
      <img src={user?.picture} alt={user?.name} />
      <p>{user?.name}</p>
      <button onClick={() => logout()}>Log Out</button>
    </div>
  );
}

API Protection

import { auth } from "express-oauth2-jwt-bearer";

const checkJwt = auth({
  audience: "https://api.example.com",
  issuerBaseURL: "https://your-tenant.auth0.com/",
});

app.get("/api/protected", checkJwt, (req, res) => {
  res.json({ message: "Protected data", user: req.auth?.payload });
});

Common Patterns

Get Access Token

const { getAccessTokenSilently } = useAuth0();

async function callApi() {
  const token = await getAccessTokenSilently({
    authorizationParams: {
      audience: "https://api.example.com",
    },
  });

  const response = await fetch("/api/data", {
    headers: { Authorization: `Bearer ${token}` },
  });

  return response.json();
}

Role-Based Access

// Check user roles from ID token
const { user } = useAuth0();
const roles = user?.["https://example.com/roles"] as string[];

if (roles?.includes("admin")) {
  // Show admin features
}

Best Practices

Do:

• Use refresh token rotation
• Configure MFA
• Set up rules for custom claims
• Use correct audience for APIs

Don’t:

• Store tokens in localStorage
• Skip token validation
• Use implicit flow
• Ignore session management

Troubleshooting

References

• Auth0 Documentation
• Auth0 React SDK