Working Auth0 on site

site/package.json

@@ -11,5 +11,8 @@
   "devDependencies": {
     "astro": "^0.20.7",
     "@astrojs/renderer-react": "^0.2.1"
+  },
+  "dependencies": {
+    "@auth0/auth0-react": "^1.8.0"
   }
 }

site/src/components/AuthTest.jsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { Auth0Provider } from "@auth0/auth0-react";
+import LoginButton from "./LoginButton";
+import LogoutButton from "./LogoutButton";
+import Profile from "./Profile";
+import ProfileFromApi from "./ProfileFromApi";
+
+const AuthTest = () => {
+  return (
+      <Auth0Provider
+        domain="dev-b-bgocbi.us.auth0.com"
+        clientId="c5A08v815qx3ySjffHbaUc5b5MPWhRad"
+        redirectUri={window.location.origin}
+        audience="https://dev-b-bgocbi.us.auth0.com/api/v2/"
+        scope="read:current_user update:current_user_metadata"
+      >
+        <LoginButton />
+        <LogoutButton />
+        <Profile />
+        <ProfileFromApi />
+      </Auth0Provider>
+  );
+};
+
+export default AuthTest;

site/src/components/LoginButton.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { useAuth0 } from "@auth0/auth0-react";
+
+const LoginButton = () => {
+  const { loginWithRedirect } = useAuth0();
+
+  return <button onClick={() => loginWithRedirect()}>Log In</button>;
+};
+
+export default LoginButton;

site/src/components/LogoutButton.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { useAuth0 } from "@auth0/auth0-react";
+
+const LogoutButton = () => {
+  const { logout } = useAuth0();
+
+  return (
+    <button onClick={() => logout({ returnTo: window.location.origin })}>
+      Log Out
+    </button>
+  );
+};
+
+export default LogoutButton;

site/src/components/Profile.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { useAuth0 } from "@auth0/auth0-react";
+
+const Profile = () => {
+  const { user, isAuthenticated, isLoading } = useAuth0();
+
+  if (isLoading) {
+    return <div>Loading ...</div>;
+  }
+
+  return (
+    isAuthenticated && (
+      <div>
+        <img src={user.picture} alt={user.name} />
+        <h2>{user.name}</h2>
+        <p>{user.email}</p>
+      </div>
+    )
+  );
+};
+
+export default Profile;

site/src/components/ProfileFromApi.jsx

@@ -0,0 +1,54 @@
+import React, { useEffect, useState } from "react";
+import { useAuth0 } from "@auth0/auth0-react";
+
+const ProfileFromApi = () => {
+  const { user, isAuthenticated, getAccessTokenSilently } = useAuth0();
+  const [userMetadata, setUserMetadata] = useState(null);
+  
+  useEffect(() => {
+    const getUserMetadata = async () => {
+      const domain = "dev-b-bgocbi.us.auth0.com";
+  
+      try {
+        const accessToken = await getAccessTokenSilently({
+          audience: `https://${domain}/api/v2/`,
+          scope: "read:current_user",
+        });
+  
+        const userDetailsByIdUrl = `https://${domain}/api/v2/users/${user.sub}`;
+  
+        const metadataResponse = await fetch(userDetailsByIdUrl, {
+          headers: {
+            Authorization: `Bearer ${accessToken}`,
+          },
+        });
+  
+        const { user_metadata } = await metadataResponse.json();
+  
+        setUserMetadata(user_metadata);
+      } catch (e) {
+        console.log(e.message);
+      }
+    };
+  
+    getUserMetadata();
+  }, [getAccessTokenSilently, user?.sub]);
+
+  return (
+    isAuthenticated && (
+      <div>
+        <img src={user.picture} alt={user.name} />
+        <h2>{user.name}</h2>
+        <p>{user.email}</p>
+        <h3>User Metadata</h3>
+        {userMetadata ? (
+          <pre>{JSON.stringify(userMetadata, null, 2)}</pre>
+        ) : (
+          "No user metadata defined"
+        )}
+      </div>
+    )
+  );
+};
+
+export default ProfileFromApi;

site/src/pages/index.astro

@@ -4,6 +4,8 @@ import Tour from '../components/Tour.astro';
 // You can import components from any supported Framework here!
 import ReactCounter from '../components/ReactCounter.jsx';
 
+import AuthTest from '../components/AuthTest.jsx';
+
 // Component Script:
 // You can write any JavaScript/TypeScript that you'd like here.
 // It will run during the build, but never in the browser.
@@ -42,6 +44,8 @@ let title = 'My Astro Site';
             </div>
         </header>
 
+        <AuthTest client:only />
+
         <Tour />
 
         <!--