auth0_spa_sdk_typescript_login_logout_user_profile.ts

1import { createAuth0Client, Auth0Client } from '@auth0/auth0-spa-js';
2
3// Configuration for your Auth0 application
4const auth0Config = {
5  domain: 'YOUR_AUTH0_DOMAIN',
6  clientId: 'YOUR_CLIENT_ID',
7  authorizationParams: {
8    redirect_uri: window.location.origin
9  }
10};
11
12async function initAuth0(): Promise<void> {
13  // 1. Create the Auth0 client
14  const auth0Client: Auth0Client = await createAuth0Client(auth0Config);
15
16  // 2. Handle the redirect callback from Auth0 after login
17  const query = window.location.search;
18  if (query.includes("code=") && query.includes("state=")) {
19    await auth0Client.handleRedirectCallback();
20    window.history.replaceState({}, document.title, "/");
21  }
22
23  // 3. Check authentication status
24  const isAuthenticated = await auth0Client.isAuthenticated();
25
26  if (isAuthenticated) {
27    // Get user profile information
28    const user = await auth0Client.getUser();
29    console.log('User is logged in:', user);
30    
31    // UI Logic: Show logout button
32    const logoutButton = document.getElementById('logout');
33    logoutButton?.addEventListener('click', () => {
34      auth0Client.logout({ 
35        logoutParams: { returnTo: window.location.origin } 
36      });
37    });
38  } else {
39    // UI Logic: Show login button
40    const loginButton = document.getElementById('login');
41    loginButton?.addEventListener('click', async () => {
42      await auth0Client.loginWithRedirect();
43    });
44  }
45}
46
47// Initialize the application
48initAuth0().catch(err => console.error('Error initializing Auth0:', err));