How to authorize a SPA to access an API?

Get Help
, ,
1

Hi,

I’m using an Auth0 API to authorize an AWS HttpAPI, and it works with the machine-to-machine test application that is auto-generated with every Auth0 API, however I can’t figure out how to get it to work with the Single Page Application that I have setup for the front-end login/logout functionality. What I’d like to happen is:

1: Login to web app via front-end (authenticated within the SPA users) ;
2: Get an access token from Auth0 API ;
3: Use access token to call the AWS HttpAPI ;

I’m getting stuck on step 2. Any help is much appreciated!

2

const { getAccessTokenSilently } = useAuth0();

useEffect(() => {
    (async () => {
        try {
            const token = await getAccessTokenSilently({
                audience: 'https://<AUTH0_API_AUDIENCE>',
                scope: 'read:items'
            });
            const response = await fetch('<AMAZON_API_ENDPOINT>', {
                headers: {
                    Authorization: `Bearer ${token}`
                }
            });
            console.log(await response.json());
        } catch (e) {
            console.error(e)
        }
    })();
}, [getAccessTokenSilently])

^^^^ Here is the code that the flow is getting stuck at (copied from GitHub - auth0/auth0-react: Auth0 SDK for React Single Page Applications (SPA) at Getting Started > Call an API)

3

Error: Consent required
at new OAuthError (auth0-react.esm.js?ae4e:142)
at eval (auth0-react.esm.js?ae4e:160)
at eval (auth0-react.esm.js?ae4e:311)
at step (auth0-react.esm.js?ae4e:87)
at Object.eval [as throw] (auth0-react.esm.js?ae4e:68)
at rejected (auth0-react.esm.js?ae4e:59)

^^^^ Here is the error I receive in my browser console (sorry that these are coming as replies, I wish there was a way to edit posts/comments here :confused: )

4

Figured it out by using Permissions tab and assigning permission to User. Feel like a ■■■■■■■ but hopefully this helps someone else.

5

Perfect! Glad you have figured it out and thanks for sharing with the rest of community!