How to Integrate Lovable with Auth0

Before touching Lovable, set up your Auth0 application correctly. Log in to manage.auth0.com. In the left sidebar, go to Applications → Applications → Create Application. Name it after your Lovable app and select 'Single Page Application' as the application type. Click Create. In the application settings that open, find these critical configuration fields: Allowed Callback URLs: Enter your Lovable app's deployed URL followed by /callback (e.g., https://your-app.lovable.app/callback). Also add http://localhost:3000/callback if you plan to develop locally. Multiple URLs are separated by commas. Allowed Logout URLs: Enter your deployed URL (e.g., https://your-app.lovable.app). This is where Auth0 redirects after logout. Allowed Web Origins: Enter your deployed URL (e.g., https://your-app.lovable.app). This is required for the Auth0 SPA SDK to function from the browser. Scroll down to copy your Domain and Client ID — these are the two values you will use in both the frontend SDK initialization and the Edge Function JWT validation. Your Domain looks like your-tenant.us.auth0.com (note the region prefix) and the Client ID is a long alphanumeric string. For JWT validation in Edge Functions, you also need to configure the API Audience. Go to Applications → APIs and create a new API (if you do not already have one for this application). The Identifier field becomes your 'audience' value for JWT validation — use a URL format like https://api.your-app.com. Save the settings. Enable API authorization in your SPA application by setting the audience when initializing the Auth0 SDK. Save all Auth0 settings before proceeding to the next step.

Store the Auth0 credentials needed for server-side JWT validation in Lovable's Cloud Secrets panel. The Auth0 Domain and Audience are not strictly secret (they appear in the frontend SDK configuration), but keeping them in Secrets alongside the server-side validation logic makes rotation easier and follows the principle of consistent credential management. Click the '+' icon next to the Preview label at the top of the Lovable editor to open the Cloud panel. Click the 'Secrets' tab. Add the following secrets: - Name: AUTH0_DOMAIN — Value: your Auth0 tenant domain (e.g., your-tenant.us.auth0.com — include the region prefix, no https://) - Name: AUTH0_AUDIENCE — Value: your API audience identifier (e.g., https://api.your-app.com) - Name: AUTH0_CLIENT_ID — Value: your Auth0 application's Client ID These values are used in the Edge Function to validate incoming JWTs. The Auth0 Domain is needed to fetch Auth0's JSON Web Key Set (JWKS) — the public keys used to verify JWT signatures. The Audience is verified to ensure the token was issued for your specific API, not just any Auth0 application. The Client ID is used in the frontend SDK initialization. You can optionally add it as a VITE_AUTH0_CLIENT_ID secret (the VITE_ prefix makes it available to the frontend at build time) rather than hardcoding it in the React component, which keeps all Auth0 configuration in one place.

The Auth0 SPA SDK (@auth0/auth0-spa-js) handles the OAuth 2.0 authorization code flow with PKCE in your browser — this includes redirecting to Auth0's Universal Login, handling the callback, storing tokens securely, and providing access tokens for API calls. In a Vite + React project like Lovable generates, the recommended approach is to import the React wrapper package @auth0/auth0-react. To add Auth0 to your Lovable frontend, open the chat panel and describe what you need. Lovable will update the package.json to add the dependency and generate the provider setup code. The key configuration values are your Auth0 domain and client ID — use the exact values from your Auth0 dashboard. The Auth0Provider component wraps your entire React app (or the section that needs authentication) and provides the useAuth0 hook to all child components. The hook gives you isLoading, isAuthenticated, user, loginWithRedirect, and logout — the core primitives for building your auth flow. For applications that use Edge Functions to access protected data, the auth0 SDK's getAccessTokenSilently() method retrieves the current access token to include in Edge Function calls as an Authorization header. The Edge Function then validates this token using the JWKS endpoint.

1// src/main.tsx — Auth0Provider setup
2import { Auth0Provider } from '@auth0/auth0-react';
3import { BrowserRouter } from 'react-router-dom';
4
5const AUTH0_DOMAIN = import.meta.env.VITE_AUTH0_DOMAIN || 'your-tenant.us.auth0.com';
6const AUTH0_CLIENT_ID = import.meta.env.VITE_AUTH0_CLIENT_ID || 'your-client-id';
7const AUTH0_AUDIENCE = import.meta.env.VITE_AUTH0_AUDIENCE || 'https://api.your-app.com';
8
9ReactDOM.createRoot(document.getElementById('root')!).render(
10  <BrowserRouter>
11    <Auth0Provider
12      domain={AUTH0_DOMAIN}
13      clientId={AUTH0_CLIENT_ID}
14      authorizationParams={{
15        redirect_uri: `${window.location.origin}/callback`,
16        audience: AUTH0_AUDIENCE,
17        scope: 'openid profile email',
18      }}
19    >
20      <App />
21    </Auth0Provider>
22  </BrowserRouter>
23);

For any Edge Function that serves protected data, you need to validate the Auth0 JWT from the Authorization header. Auth0 uses RS256 (RSA signature), meaning the JWT is signed with Auth0's private key and verified using the corresponding public key from Auth0's JWKS endpoint. The JWKS endpoint is public and hosted at https://{your-domain}/.well-known/jwks.json. The Edge Function below demonstrates JWT validation for a protected data endpoint. It fetches Auth0's JWKS on the first request (caching is handled by Deno's runtime), extracts the public key matching the JWT's kid (key ID) header, and verifies the signature. It also validates the audience and issuer claims to ensure the token was issued for your specific application. This approach works without any additional npm packages beyond what Deno provides natively — the jose library is the standard choice for JWT operations in Deno environments and is available from esm.sh. Once JWT validation is in place, you can extract the Auth0 user ID from the sub claim and use it as a stable identifier for your Supabase database records, replicating the role that auth.uid() plays in Lovable's native Supabase Auth setup.

1// supabase/functions/protected-data/index.ts
2import { createRemoteJWKSet, jwtVerify } from 'https://esm.sh/jose@5';
3import { createClient } from 'https://esm.sh/@supabase/supabase-js@2';
4
5const corsHeaders = {
6  'Access-Control-Allow-Origin': '*',
7  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
8};
9
10Deno.serve(async (req) => {
11  if (req.method === 'OPTIONS') return new Response('ok', { headers: corsHeaders });
12
13  const authHeader = req.headers.get('Authorization');
14  if (!authHeader?.startsWith('Bearer ')) {
15    return new Response(JSON.stringify({ error: 'Missing or invalid Authorization header' }), {
16      status: 401,
17      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
18    });
19  }
20
21  const token = authHeader.replace('Bearer ', '');
22  const auth0Domain = Deno.env.get('AUTH0_DOMAIN')!;
23  const audience = Deno.env.get('AUTH0_AUDIENCE')!;
24
25  try {
26    const JWKS = createRemoteJWKSet(
27      new URL(`https://${auth0Domain}/.well-known/jwks.json`)
28    );
29
30    const { payload } = await jwtVerify(token, JWKS, {
31      issuer: `https://${auth0Domain}/`,
32      audience,
33    });
34
35    const userId = payload.sub as string;
36
37    // Use service role key for server-side Supabase queries
38    const supabase = createClient(
39      Deno.env.get('SUPABASE_URL')!,
40      Deno.env.get('SUPABASE_SERVICE_ROLE_KEY')!
41    );
42
43    const { data, error } = await supabase
44      .from('user_data')
45      .select('*')
46      .eq('auth0_user_id', userId);
47
48    if (error) throw error;
49
50    return new Response(JSON.stringify({ data, userId }), {
51      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
52    });
53  } catch (err) {
54    console.error('JWT validation error:', err);
55    return new Response(JSON.stringify({ error: 'Invalid token', details: String(err) }), {
56      status: 401,
57      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
58    });
59  }
60});

Auth0 authentication cannot be fully tested in Lovable's editor preview because Auth0's redirect flow requires your app to be running on the exact URL registered in Auth0's Allowed Callback URLs. The preview iframe uses a different origin than your deployed URL, so the redirect will be blocked. All Auth0 testing must happen on your published Lovable app URL. Deploy your app by clicking the Publish button in the top-right corner of the Lovable editor. Once deployed, open the live URL in a new browser tab. Click the login button. You should be redirected to Auth0's Universal Login page (hosted at your-tenant.auth0.com/login). The login page will show the options you configured — email/password, Google, or whatever social providers and enterprise connections you enabled. Authenticate with a test account. After successful login, Auth0 redirects back to your app at /callback with an authorization code. The Auth0 SPA SDK exchanges this code for tokens automatically. You should be redirected to your dashboard and see the user's name and email displayed from the Auth0 user object. To test the Edge Function JWT validation, check the browser's developer tools Console tab for the access token (temporarily log it with console.log during development). Then try accessing a protected route that calls the Edge Function. The request should include the Bearer token in the Authorization header automatically when using supabase.functions.invoke() after you pass the access token as the Authorization header. For ongoing issues with Auth0 redirect flows, social login configurations, or enterprise SSO setup, RapidDev's team has experience configuring Auth0 across multiple Lovable projects and can help with Auth0 Rules, Actions, and advanced enterprise configurations.

1// src/hooks/useProtectedData.ts
2import { useAuth0 } from '@auth0/auth0-react';
3import { useState, useEffect } from 'react';
4import { supabase } from '@/integrations/supabase/client';
5
6export function useProtectedData() {
7  const { getAccessTokenSilently, isAuthenticated } = useAuth0();
8  const [data, setData] = useState(null);
9  const [loading, setLoading] = useState(false);
10
11  useEffect(() => {
12    if (!isAuthenticated) return;
13    const fetchData = async () => {
14      setLoading(true);
15      try {
16        const accessToken = await getAccessTokenSilently();
17        const { data: result, error } = await supabase.functions.invoke('protected-data', {
18          headers: { Authorization: `Bearer ${accessToken}` },
19        });
20        if (error) throw error;
21        setData(result.data);
22      } catch (err) {
23        console.error('Protected data error:', err);
24      } finally {
25        setLoading(false);
26      }
27    };
28    fetchData();
29  }, [isAuthenticated, getAccessTokenSilently]);
30
31  return { data, loading };
32}