# AccessTokenError: Could not retrieve an access token with scopes "openid profile email"

**URL:** <https://community.auth0.com/t/accesstokenerror-could-not-retrieve-an-access-token-with-scopes-openid-profile-email/61745>\
**Category:** Get Help\
**Tags:** jwt, api, scopes, access-token, auth0\
**Created:** [April 26, 2021, 3:16pm UTC](https://community.auth0.com/t/accesstokenerror-could-not-retrieve-an-access-token-with-scopes-openid-profile-email/61745 "2021-04-26T15:16:19Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![brandon.bachrach](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/brandon.bachrach/32/29030_2.png) [@brandon.bachrach](https://community.auth0.com/u/brandon.bachrach)\
**Post date:** [April 26, 2021, 3:16pm UTC](https://community.auth0.com/t/accesstokenerror-could-not-retrieve-an-access-token-with-scopes-openid-profile-email/61745/1 "2021-04-26T15:16:19Z")

</div>

I’ve created a NextJS app and API and have used Auth0 to both manage users and secure the API endpoints. I am only using Email/Password authentication. I had everything working properly but now I am getting the error “AccessTokenError: Could not retrieve an access token with scopes “openid profile email”. The user will need to sign in again.” Signing in again doesn’t work of course. It seems I am only getting a token with the scope “openid” but “profile” and “email” suddenly aren’t available.

The documentation has been a bit confusing but from what I can tell, it seems my Auth0 Application has the necessary scopes available but my Auth0 API does not.

Has anyone run into this error before? I can provide code examples but I am unsure if this is an Auth0 configuration issue or a code issue.

---

<div class="post-metadata">

**Author:** ![stephanie.chamblee](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/stephanie.chamblee/32/26087_2.png) [@stephanie.chamblee](https://community.auth0.com/u/stephanie.chamblee)\
**Post date:** [April 26, 2021, 4:46pm UTC](https://community.auth0.com/t/accesstokenerror-could-not-retrieve-an-access-token-with-scopes-openid-profile-email/61745/3 "2021-04-26T16:46:42Z")

</div>

Hi @brandon.bachrach,

Welcome to the Community!

In order to help troubleshoot this could you please answer the following?:

- Which Auth0 SDK and version are you using in your project?
- When the error is thrown, do you see an error message in your tenant logs in your Auth0 dashboard?
- Are you integrating the SDK into an existing app or are you using a [Quickstart](https://auth0.com/docs/quickstart/webapp/nextjs/01-login) or [article](https://auth0.com/blog/ultimate-guide-nextjs-authentication-auth0/)?

Thank you!

---

<div class="post-metadata">

**Author:** ![brandon.bachrach](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/brandon.bachrach/32/29030_2.png) [@brandon.bachrach](https://community.auth0.com/u/brandon.bachrach)\
**Post date:** [April 26, 2021, 5:41pm UTC](https://community.auth0.com/t/accesstokenerror-could-not-retrieve-an-access-token-with-scopes-openid-profile-email/61745/4 "2021-04-26T17:41:59Z")

</div>

Im using nextjs-auth0 and I followed similar steps to [Auth0 Next.js SDK Quickstarts: Login](https://auth0.com/docs/quickstart/webapp/nextjs/01-login) . I followed this article too [How to add Auth0 to Nextjs- the Ultimate Guide | Code Mochi](https://www.codemochi.com/blog/2020-04-01-how-to-add-auth0-nextjs).

I am not seeing the error in the Auth0 logs. I did have everything working properly and then the access token stopped providing me with the profile and email scopes. Im unsure what changed in that time.

---

<div class="post-metadata">

**Author:** ![stephanie.chamblee](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/stephanie.chamblee/32/26087_2.png) [@stephanie.chamblee](https://community.auth0.com/u/stephanie.chamblee)\
**Post date:** [April 26, 2021, 5:48pm UTC](https://community.auth0.com/t/accesstokenerror-could-not-retrieve-an-access-token-with-scopes-openid-profile-email/61745/5 "2021-04-26T17:48:30Z")

</div>

Thanks for this info! Do you have a call to the `initAuth0` method in your code? If so, could you please send a code snippet of the configs?

---

<div class="post-metadata">

**Author:** ![brandon.bachrach](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/brandon.bachrach/32/29030_2.png) [@brandon.bachrach](https://community.auth0.com/u/brandon.bachrach)\
**Post date:** [April 26, 2021, 6:45pm UTC](https://community.auth0.com/t/accesstokenerror-could-not-retrieve-an-access-token-with-scopes-openid-profile-email/61745/8 "2021-04-26T18:45:15Z")

</div>

@stephanie.chamblee  
In /utils/auth0.js I have:

```auto
import { initAuth0 } from "@auth0/nextjs-auth0";
export default initAuth0();

```

I noticed most documentation included a config object in the initAuth0 call, but I was getting an error for every value saying that they were not allowed for some reason.  
example: `[1] TypeError: "session.cookieSecret" is not allowed`

This was my old initAuth0 call

```auto
export default initAuth0(
  {
  domain: process.env.AUTH0_BASE_URL,
  clientId: process.env.AUTH0_CLIENT_ID,
  clientSecret: process.env.AUTH0_CLIENT_SECRET,
  scope: "openid profile",
  redirectUri: process.env.AUTH0_BASE_URL,
  postLogoutRedirectUri: process.env.AUTH0_BASE_URL,
  session: {
    cookieSecret: process.env.AUTH0_SECRET,
    cookieLifetime: 60 * 60 * 8,
    storeIdToken: false,
    storeAccessToken: false,
    storeRefreshToken: false,
  },
  oidcClient: {
    httpTimeout: 2500,
    clockTolerance: 10000,
  },
}
);

```

After looking through the source code for this function, I found it is just pulling process.env values, so I just made sure to name my env variables accordingly. Here are the variables I have defined.

```auto
AUTH0_AUDIENCE = [my api indentifier]
AUTH0_BASE_URL = http://localhost:3000
AUTH0_CALLBACK_URL = http://localhost:3000/api/auth/callback
AUTH0_CLIENT_ID =
AUTH0_CLIENT_SECRET =
AUTH0_ISSUER_BASE_URL = 
AUTH0_SCOPE = "openid profile email"
AUTH0_SECRET = [random string]

```

---

<div class="post-metadata">

**Author:** ![stephanie.chamblee](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/stephanie.chamblee/32/26087_2.png) [@stephanie.chamblee](https://community.auth0.com/u/stephanie.chamblee)\
**Post date:** [April 27, 2021, 11:37am UTC](https://community.auth0.com/t/accesstokenerror-could-not-retrieve-an-access-token-with-scopes-openid-profile-email/61745/9 "2021-04-27T11:37:05Z")

</div>

Have you tried using this to initialize auth instead as shown in [the quickstart](https://auth0.com/docs/quickstart/webapp/nextjs/01-login?_ga=2.145475511.2045786806.1619351559-1595415333.1607347674#add-the-dynamic-api-route)?:

```auto
import { handleAuth } from '@auth0/nextjs-auth0';

export default handleAuth();

```

Also, do you have values set for `AUTH0_CLIENT_ID`, `AUTH0_CLIENT_SECRET` and `AUTH0_ISSUER_BASE_UR`?

I did find a Github issue that could be related: [AccessTokenError When Re-fetching User Profile · Issue #145 · auth0/nextjs-auth0 · GitHub](https://github.com/auth0/nextjs-auth0/issues/145)

---

<div class="post-metadata">

**Author:** ![brandon.bachrach](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/brandon.bachrach/32/29030_2.png) [@brandon.bachrach](https://community.auth0.com/u/brandon.bachrach)\
**Post date:** [April 27, 2021, 2:39pm UTC](https://community.auth0.com/t/accesstokenerror-could-not-retrieve-an-access-token-with-scopes-openid-profile-email/61745/10 "2021-04-27T14:39:38Z")

</div>

I do have those values set for `AUTH0_CLIENT_ID` , `AUTH0_CLIENT_SECRET` and `AUTH0_ISSUER_BASE_URL` but wasn’t sure if I should share them here. And I do have `handleAuth()` in `/pages/api/auth/[...auth0].js`. If I’m not mistaken that just exposes the /login /callback and /logout endpoints right?

---

<div class="post-metadata">

**Author:** ![stephanie.chamblee](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/stephanie.chamblee/32/26087_2.png) [@stephanie.chamblee](https://community.auth0.com/u/stephanie.chamblee)\
**Post date:** [April 27, 2021, 4:11pm UTC](https://community.auth0.com/t/accesstokenerror-could-not-retrieve-an-access-token-with-scopes-openid-profile-email/61745/11 "2021-04-27T16:11:32Z")

</div>

That’s correct, those values shouldn’t be posted here. Thank you for clarifying!

Hm, yes, you are correct. I am having trouble recreating the issue. When you inspect the JWT at [jwt.io](http://jwt.io) are you seeing the scopes claim?

---

<div class="post-metadata">

**Author:** ![brandon.bachrach](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/brandon.bachrach/32/29030_2.png) [@brandon.bachrach](https://community.auth0.com/u/brandon.bachrach)\
**Post date:** [April 27, 2021, 4:21pm UTC](https://community.auth0.com/t/accesstokenerror-could-not-retrieve-an-access-token-with-scopes-openid-profile-email/61745/12 "2021-04-27T16:21:20Z")

</div>

The JWT being returned doesn’t include the proper scopes. But interestingly enough, I created a stripped-down duplicate of my app, with none of my components, just the login button and user page. And I am seeing the proper scopes represented there. So it must be something that I’m doing in the app that’s causing the issue. I will be adding and removing features to see what causes it.

I am suspecting it’s something to do with my getInitailProps function in certain components that I’m using to pass the AccessToken to my API.

Example:

```auto
Index.getInitialProps = async ({ req, res }) => {
  try {
    const { accessToken } = await auth0.getAccessToken(req, res, {
      scopes: [process.env.AUTH0_SCOPE],
    });

    const headers = {
      headers: {
        Authorization: `Bearer ${accessToken}`,
      },
    };

    const customerRes = await axios.get(
      "http://localhost:3001/[API ENDPOINT HERE]",
      headers
    );
    const activeSubscribers = customerRes.data.activeSubscribers;
    return { activeSubscribers };
  } catch (err) {
    console.error(err);
    return {};
  }
};

```

Could you let me know if you see any apparent issues with my API endpoint protection.

Thanks!

---

<div class="post-metadata">

**Author:** ![stephanie.chamblee](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/stephanie.chamblee/32/26087_2.png) [@stephanie.chamblee](https://community.auth0.com/u/stephanie.chamblee)\
**Post date:** [April 27, 2021, 4:55pm UTC](https://community.auth0.com/t/accesstokenerror-could-not-retrieve-an-access-token-with-scopes-openid-profile-email/61745/13 "2021-04-27T16:55:13Z")

</div>

That is interesting!

I was finally able to recreate the `Could not retrieve an Access Token with scopes...` error. It seems to occur when I request a scope that has not been set up for my external API.

The `getAccessToken` method seems to take an array of strings: [https://auth0.github.io/nextjs-auth0/interfaces/session\_get\_access\_token.accesstokenrequest.html](https://auth0.github.io/nextjs-auth0/interfaces/session_get_access_token.accesstokenrequest.html)

However, your env variable is one string with spaces separating each scope. In your code, instead of requesting the “`openid`”, “`profile`”, and “`email`” scopes, the `getAccessToken` method is looking for one scope called “`openid profile email`”, which it cannot find.

Your env variable is correct, though. When you decode the JWT, you should see two audiences, for example:

```auto
  "aud": [
    "https://example.com/health-api",
    "https://my-domain.auth0.com/userinfo"
  ],

```

The email, profile, and openid scopes are used for the `/userinfo` endpoint, not your external API. Since the scopes listed in the `getAccessToken` method seem to be intended for an external API, I would try removing the `scopes` optional param:

```auto
const { accessToken } = await auth0.getAccessToken(req, res)

```

---

<div class="post-metadata">

**Author:** ![brandon.bachrach](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/brandon.bachrach/32/29030_2.png) [@brandon.bachrach](https://community.auth0.com/u/brandon.bachrach)\
**Post date:** [April 27, 2021, 5:36pm UTC](https://community.auth0.com/t/accesstokenerror-could-not-retrieve-an-access-token-with-scopes-openid-profile-email/61745/14 "2021-04-27T17:36:28Z")

</div>

That seems to have solved it! I also tested this and it worked too: `scopes:["openid","profile","email"]`. Thank you for clearing that up, I didn’t realize it was looking for one scope when I used that env variable. But it makes sense looking at it now!

I’m still having an issue where routing to a page is resulting in an empty `getInitialProps` (ie. the `catch (err) {` block running. Once I refresh everything loads properly though. I’m unsure if that’s Auth0 related or not. I’d assume it means the client side routing is causing an error with auth0.getAccessToken but Im unsure why.

---

<div class="post-metadata">

**Author:** ![brandon.bachrach](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/brandon.bachrach/32/29030_2.png) [@brandon.bachrach](https://community.auth0.com/u/brandon.bachrach)\
**Post date:** [April 27, 2021, 5:55pm UTC](https://community.auth0.com/t/accesstokenerror-could-not-retrieve-an-access-token-with-scopes-openid-profile-email/61745/15 "2021-04-27T17:55:17Z")

</div>

Ah I see the issue.

I removed the try catch block and saw this error.  
`Error: The getAccessToken method can only be used from the server side`

Is there another way to retrieve the access token so I can use it in my API calls?

---

<div class="post-metadata">

**Author:** ![brandon.bachrach](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/brandon.bachrach/32/29030_2.png) [@brandon.bachrach](https://community.auth0.com/u/brandon.bachrach)\
**Post date:** [April 27, 2021, 6:26pm UTC](https://community.auth0.com/t/accesstokenerror-could-not-retrieve-an-access-token-with-scopes-openid-profile-email/61745/16 "2021-04-27T18:26:13Z")

</div>

I’m going to try following these steps to proxy the API request so the getAccessToken function only runs on the backend.

> <https://github.com/auth0/nextjs-auth0/blob/beta/EXAMPLES.md#access-an-external-api-from-the-front-end>

---

<div class="post-metadata">

**Author:** ![stephanie.chamblee](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/stephanie.chamblee/32/26087_2.png) [@stephanie.chamblee](https://community.auth0.com/u/stephanie.chamblee)\
**Post date:** [April 27, 2021, 6:28pm UTC](https://community.auth0.com/t/accesstokenerror-could-not-retrieve-an-access-token-with-scopes-openid-profile-email/61745/17 "2021-04-27T18:28:44Z")

</div>

That looks like a good plan. Glad you were able to get past the initial error message! You may have read this article, but just in case, I’d recommend this one as well: [How to Authenticate with Next.js and Auth0: A Guide for Every Deployment Model](https://auth0.com/blog/ultimate-guide-nextjs-authentication-auth0/?_ga=2.216674197.2045786806.1619351559-1595415333.1607347674)

---

<div class="post-metadata">

**Author:** ![brandon.bachrach](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/brandon.bachrach/32/29030_2.png) [@brandon.bachrach](https://community.auth0.com/u/brandon.bachrach)\
**Post date:** [April 28, 2021, 6:04pm UTC](https://community.auth0.com/t/accesstokenerror-could-not-retrieve-an-access-token-with-scopes-openid-profile-email/61745/18 "2021-04-28T18:04:02Z")

</div>

I tried this method, and I am running into one more issue. I am getting a 401 error when I try to access the page that is calling my API. But I can actually access the API endpoint directly in browser and see the data show properly, so I believe I am authenticated properly. When I remove `withApiAuthRequired` I get a 500 error.

Here’s the getInitialProps of the page that is calling my API

```auto
Index.getInitialProps = async ({ req, res }) => {
  console.log("test");
  const activeSubscribers = await axios.get(
    "http://localhost:3000/api/get-active-subscribers"
  );
  return { activeSubscribers };
};

```

And here’s the API endpoint that is being used as a proxy to call my external API with an access token.

```auto
import { getAccessToken, withApiAuthRequired } from "@auth0/nextjs-auth0";
import axios from "axios";
export default withApiAuthRequired(async function getActiveSubscribers(
  req,
  res
) {
  // If your Access Token is expired and you have a Refresh Token
  // `getAccessToken` will fetch you a new one using the `refresh_token` grant
  const { accessToken } = await getAccessToken(req, res);
  const headers = {
    headers: {
      Authorization: `Bearer ${accessToken}`,
    },
  };
  const customerRes = await axios.get(
    "http://localhost:3001/get-active-subscribers",
    headers
  );
  const activeSubscribers = customerRes.data.activeSubscribers;
  res.status(200).json(activeSubscribers);
});

```

---

<div class="post-metadata">

**Author:** ![stephanie.chamblee](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/stephanie.chamblee/32/26087_2.png) [@stephanie.chamblee](https://community.auth0.com/u/stephanie.chamblee)\
**Post date:** [April 29, 2021, 7:12pm UTC](https://community.auth0.com/t/accesstokenerror-could-not-retrieve-an-access-token-with-scopes-openid-profile-email/61745/19 "2021-04-29T19:12:05Z")

</div>

Hi @brandon.bachrach,

Is the request to your API made client-side? Since it is working directly, but not on the webpage, I’m wondering if it might be a CORS issue. If you look at the network requests in dev tools, does it look like an OPTIONS request is failing?

---

<div class="post-metadata">

**Author:** ![brandon.bachrach](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/brandon.bachrach/32/29030_2.png) [@brandon.bachrach](https://community.auth0.com/u/brandon.bachrach)\
**Post date:** [May 4, 2021, 2:31pm UTC](https://community.auth0.com/t/accesstokenerror-could-not-retrieve-an-access-token-with-scopes-openid-profile-email/61745/20 "2021-05-04T14:31:44Z")

</div>

I solved this issue using the SWR library that is mentioned in the nextjs-auth0 documentation. So it ends up I didn’t need getInitialProps at all.

I created a custom hook to handle my get requests to the internal NextJS API, which is then calling my external API.

`/hooks/useFetchAPI.js`

```auto
import { useState, useEffect } from "react";
import fetch from "unfetch";
import useSWR from "swr";

const useFetchAPI = (endpoint) => {
  const [loading, setLoading] = useState(true);
  const [response, setResponse] = useState([]);

  const { data, error } = useSWR(
    `${process.env.AUTH0_BASE_URL}${endpoint}`,
    fetcher
  );

  if (error) {
    return error;
  }

  useEffect(() => {
    if (!loading && data) {
      return;
    }
    if (data) {
      setResponse(data);
      setLoading(false);
    }
  }, [data]);

  return [response, loading];
};

const fetcher = (url) => fetch(url).then((r) => r.json());

export default useFetchAPI;

```

Then I call it from one of my components:

```auto
const Customer = () => {
  const router = useRouter();
  const custID = router.query.custid;
  const [customerDetails, customerLoading] = useFetchAPI(
    `/api/getCustomerDetails?custID=${custID}`
...........
  );

```

And here’s what one of my NextJS API endpoints looks like:  
`/pages/api/getCustomerDetails.js`

```auto
import { getAccessToken, withApiAuthRequired } from "@auth0/nextjs-auth0";
import axios from "axios";

export default withApiAuthRequired(async function getCustomerDetails(req, res) {
  try {
    const { accessToken } = await getAccessToken(req, res);
    const headers = {
      headers: {
        Authorization: `Bearer ${accessToken}`,
      },
    };

    const custID = req.query.custID;
    const response = await axios.get(
      `http://localhost:3001/get-customer-details?custID=${custID}`,
      headers
    );
    const customerDetails = response.data.customerDetails;

    res.status(200).json(customerDetails);
  } catch (error) {
    console.error("error", error);
    res.status(error.status || 500).json({
      code: error.code,
      error: error.message,
    });
  }
});

```

And this is now working perfectly! Thanks for all the help! Hopefully this helps someone else too.

---

<div class="post-metadata">

**Author:** ![stephanie.chamblee](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/stephanie.chamblee/32/26087_2.png) [@stephanie.chamblee](https://community.auth0.com/u/stephanie.chamblee)\
**Post date:** [May 4, 2021, 4:12pm UTC](https://community.auth0.com/t/accesstokenerror-could-not-retrieve-an-access-token-with-scopes-openid-profile-email/61745/21 "2021-05-04T16:12:18Z")

</div>

That’s great! Thanks for sharing your solution!

---

<div class="post-metadata">

**Author:** ![stephanie.chamblee](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/stephanie.chamblee/32/26087_2.png) [@stephanie.chamblee](https://community.auth0.com/u/stephanie.chamblee)\
**Post date:** [May 14, 2021, 1:26pm UTC](https://community.auth0.com/t/accesstokenerror-could-not-retrieve-an-access-token-with-scopes-openid-profile-email/61745/22 "2021-05-14T13:26:35Z")

</div>

A post was split to a new topic: [AccessTokenError when requesting offline\_access scope](https://community.auth0.com/t/accesstokenerror-when-requesting-offline-access-scope/62813)

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/auth0/original/3X/b/5/b560f266932fcce5d57f09a6595bd50518cae3f3.jpeg) [@system](https://community.auth0.com/u/system)\
**Post date:** [May 29, 2021, 1:26pm UTC](https://community.auth0.com/t/accesstokenerror-could-not-retrieve-an-access-token-with-scopes-openid-profile-email/61745/23 "2021-05-29T13:26:49Z")

</div>

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.