How to Integrate Bolt.new with Auth0

1# .env — add to project root
2NEXT_PUBLIC_AUTH0_DOMAIN=dev-xxxxxxxx.us.auth0.com
3NEXT_PUBLIC_AUTH0_CLIENT_ID=your_client_id_here
4NEXT_PUBLIC_AUTH0_AUDIENCE=https://your-api-identifier
5# Used server-side for Management API or JWT validation
6AUTH0_CLIENT_SECRET=your_client_secret_here

1// components/providers.tsx
2'use client';
3
4import { Auth0Provider } from '@auth0/auth0-react';
5import { useRouter } from 'next/navigation';
6
7export function Providers({ children }: { children: React.ReactNode }) {
8  const router = useRouter();
9
10  const onRedirectCallback = (appState?: { returnTo?: string }) => {
11    router.push(appState?.returnTo || '/');
12  };
13
14  return (
15    <Auth0Provider
16      domain={process.env.NEXT_PUBLIC_AUTH0_DOMAIN!}
17      clientId={process.env.NEXT_PUBLIC_AUTH0_CLIENT_ID!}
18      authorizationParams={{
19        redirect_uri: typeof window !== 'undefined' ? window.location.origin : '',
20        audience: process.env.NEXT_PUBLIC_AUTH0_AUDIENCE,
21      }}
22      onRedirectCallback={onRedirectCallback}
23    >
24      {children}
25    </Auth0Provider>
26  );
27}
28
29// components/NavBar.tsx
30'use client';
31
32import { useAuth0 } from '@auth0/auth0-react';
33
34export function NavBar() {
35  const { isAuthenticated, isLoading, user, loginWithRedirect, logout } = useAuth0();
36
37  if (isLoading) return <nav className="h-16 bg-white border-b" />;
38
39  return (
40    <nav className="h-16 bg-white border-b flex items-center justify-between px-6">
41      <span className="font-semibold">My App</span>
42      <div className="flex items-center gap-4">
43        {isAuthenticated ? (
44          <>
45            {user?.picture && (
46              <img src={user.picture} alt={user.name} className="w-8 h-8 rounded-full" />
47            )}
48            <span className="text-sm text-gray-700">{user?.name}</span>
49            <button
50              onClick={() => logout({ logoutParams: { returnTo: window.location.origin } })}
51              className="text-sm text-red-600 hover:underline"
52            >
53              Log Out
54            </button>
55          </>
56        ) : (
57          <button
58            onClick={() => loginWithRedirect()}
59            className="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-blue-700"
60          >
61            Log In
62          </button>
63        )}
64      </div>
65    </nav>
66  );
67}

1// app/profile/page.tsx
2'use client';
3
4import { useAuth0 } from '@auth0/auth0-react';
5import { useEffect } from 'react';
6
7export default function ProfilePage() {
8  const { isAuthenticated, isLoading, user, loginWithRedirect, getAccessTokenSilently } = useAuth0();
9
10  useEffect(() => {
11    if (!isLoading && !isAuthenticated) {
12      loginWithRedirect({ appState: { returnTo: '/profile' } });
13    }
14  }, [isAuthenticated, isLoading, loginWithRedirect]);
15
16  const fetchProtectedData = async () => {
17    try {
18      const token = await getAccessTokenSilently();
19      const res = await fetch('/api/profile', {
20        headers: { Authorization: `Bearer ${token}` },
21      });
22      const data = await res.json();
23      console.log('Protected data:', data);
24    } catch (err) {
25      console.error('Error fetching protected data:', err);
26    }
27  };
28
29  if (isLoading) {
30    return <div className="flex justify-center items-center h-64">Loading...</div>;
31  }
32
33  if (!isAuthenticated || !user) return null;
34
35  return (
36    <div className="max-w-lg mx-auto px-4 py-12">
37      <div className="bg-white rounded-xl border shadow-sm p-8 text-center">
38        {user.picture && (
39          <img src={user.picture} alt={user.name} className="w-20 h-20 rounded-full mx-auto mb-4" />
40        )}
41        <h1 className="text-2xl font-bold mb-1">{user.name}</h1>
42        <p className="text-gray-500 mb-2">{user.email}</p>
43        <span className={`text-xs px-2 py-1 rounded-full ${
44          user.email_verified ? 'bg-green-100 text-green-700' : 'bg-yellow-100 text-yellow-700'
45        }`}>
46          {user.email_verified ? 'Email verified' : 'Email not verified'}
47        </span>
48        <button
49          onClick={fetchProtectedData}
50          className="mt-6 block w-full bg-blue-600 text-white py-2 rounded-lg text-sm font-medium hover:bg-blue-700"
51        >
52          Get My Data
53        </button>
54      </div>
55    </div>
56  );
57}

1// lib/auth0-verify.ts
2import { createRemoteJWKSet, jwtVerify, type JWTPayload } from 'jose';
3
4interface Auth0Payload extends JWTPayload {
5  sub: string;
6  email?: string;
7  name?: string;
8  [key: string]: unknown;
9}
10
11const JWKS = createRemoteJWKSet(
12  new URL(`https://${process.env.NEXT_PUBLIC_AUTH0_DOMAIN}/.well-known/jwks.json`)
13);
14
15export async function verifyAuth0Token(request: Request): Promise<Auth0Payload> {
16  const authHeader = request.headers.get('Authorization');
17  if (!authHeader?.startsWith('Bearer ')) {
18    throw new Error('Missing or invalid Authorization header');
19  }
20
21  const token = authHeader.slice(7);
22  const domain = process.env.NEXT_PUBLIC_AUTH0_DOMAIN;
23  const audience = process.env.NEXT_PUBLIC_AUTH0_AUDIENCE;
24
25  const { payload } = await jwtVerify(token, JWKS, {
26    issuer: `https://${domain}/`,
27    audience: audience || undefined,
28  });
29
30  return payload as Auth0Payload;
31}
32
33// app/api/profile/route.ts
34import { NextResponse } from 'next/server';
35import { verifyAuth0Token } from '@/lib/auth0-verify';
36
37export async function GET(request: Request) {
38  try {
39    const payload = await verifyAuth0Token(request);
40
41    return NextResponse.json({
42      userId: payload.sub,
43      email: payload.email,
44      // Custom roles claim added via Auth0 Actions
45      roles: payload['https://your-app.com/roles'] || [],
46    });
47  } catch (error) {
48    return NextResponse.json(
49      { error: 'Unauthorized' },
50      { status: 401 }
51    );
52  }
53}