auth0_react_sdk_login_logout_user_profile_typescript.ts

1import React from 'react';
2import { createRoot } from 'react-dom/client';
3import { Auth0Provider, useAuth0 } from '@auth0/auth0-react';
4
5// 1. The Wrapper Component
6const App = () => {
7  const { 
8    isLoading, 
9    isAuthenticated, 
10    error, 
11    user, 
12    loginWithRedirect, 
13    logout 
14  } = useAuth0();
15
16  if (isLoading) {
17    return <div>Loading...</div>;
18  }
19  if (error) {
20    return <div>Oops... {error.message}</div>;
21  }
22
23  if (isAuthenticated) {
24    return (
25      <div>
26        Hello {user?.name}{' '}
27        <button onClick={() => logout({ logoutParams: { returnTo: window.location.origin } })}>
28          Log out
29        </button>
30      </div>
31    );
32  } else {
33    return <button onClick={() => loginWithRedirect()}>Log in</button>;
34  }
35};
36
37// 2. The Provider Setup
38const root = createRoot(document.getElementById('root') as HTMLElement);
39
40root.render(
41  <Auth0Provider
42    domain="{yourDomain}"
43    clientId="{yourClientId}"
44    authorizationParams={{
45      redirect_uri: window.location.origin
46    }}
47  >
48    <App />
49  </Auth0Provider>
50);