Use auth0 jwt in api

This commit is contained in:
2021-09-28 22:01:16 -05:00
parent 8855709a34
commit 737be09b5f
5 changed files with 37 additions and 38 deletions

View File

@@ -7,18 +7,18 @@ import ProfileFromApi from "./ProfileFromApi";
const AuthTest = () => { const AuthTest = () => {
return ( return (
<Auth0Provider <Auth0Provider
domain="dev-b-bgocbi.us.auth0.com" domain="dev-b-bgocbi.us.auth0.com"
clientId="c5A08v815qx3ySjffHbaUc5b5MPWhRad" clientId="c5A08v815qx3ySjffHbaUc5b5MPWhRad"
redirectUri={window.location.origin} redirectUri={window.location.origin}
audience="https://dev-b-bgocbi.us.auth0.com/api/v2/" audience="https://1t8da6s66e.execute-api.us-east-1.amazonaws.com/"
scope="read:current_user update:current_user_metadata" scope="read:stuff"
> >
<LoginButton /> <LoginButton />
<LogoutButton /> <LogoutButton />
<Profile /> <Profile />
<ProfileFromApi /> <ProfileFromApi />
</Auth0Provider> </Auth0Provider>
); );
}; };

View File

@@ -3,35 +3,34 @@ import { useAuth0 } from "@auth0/auth0-react";
const ProfileFromApi = () => { const ProfileFromApi = () => {
const { user, isAuthenticated, getAccessTokenSilently } = useAuth0(); const { user, isAuthenticated, getAccessTokenSilently } = useAuth0();
const [userMetadata, setUserMetadata] = useState(null); const [message, setMessage] = useState(null);
useEffect(() => { useEffect(() => {
const getUserMetadata = async () => { const getMessage = async () => {
const domain = "dev-b-bgocbi.us.auth0.com";
try { try {
const accessToken = await getAccessTokenSilently({ const accessToken = await getAccessTokenSilently({
audience: `https://${domain}/api/v2/`, audience: "https://1t8da6s66e.execute-api.us-east-1.amazonaws.com/",
scope: "read:current_user", scope: "read:stuff",
}); });
const userDetailsByIdUrl = `https://${domain}/api/v2/users/${user.sub}`; const authorizedUrl = "https://1t8da6s66e.execute-api.us-east-1.amazonaws.com/authorized";
const metadataResponse = await fetch(userDetailsByIdUrl, { const authorizedResponse = await fetch(authorizedUrl, {
headers: { headers: {
Authorization: `Bearer ${accessToken}`, Authorization: `Bearer ${accessToken}`,
}, },
}); });
const { user_metadata } = await metadataResponse.json(); const message = await authorizedResponse.text();
setUserMetadata(user_metadata); setMessage(message);
} catch (e) { } catch (e) {
console.log(e.message); console.log(e.message);
} }
}; };
getUserMetadata(); getMessage();
}, [getAccessTokenSilently, user?.sub]); }, [getAccessTokenSilently, user?.sub]);
return ( return (
@@ -40,11 +39,11 @@ const ProfileFromApi = () => {
<img src={user.picture} alt={user.name} /> <img src={user.picture} alt={user.name} />
<h2>{user.name}</h2> <h2>{user.name}</h2>
<p>{user.email}</p> <p>{user.email}</p>
<h3>User Metadata</h3> <h3>API Message</h3>
{userMetadata ? ( {message ? (
<pre>{JSON.stringify(userMetadata, null, 2)}</pre> <pre>{message}</pre>
) : ( ) : (
"No user metadata defined" "No message found"
)} )}
</div> </div>
) )