Use auth0 jwt in api
This commit is contained in:
@@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -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>
|
||||||
)
|
)
|
||||||
|
|||||||
Reference in New Issue
Block a user