"You may have pressed the back button, refreshed during login, opened too many login dialogs" with ULP and Custom Domain

Get Help
, ,
1

Hi there, so I took the Next.js sample app and I was able to login to get it working. Then I added the ability to link to other accounts via a PUT to /identities. Then I switched to Custom Domain and everything seems to have gone haywire despite only changing the domain in the code.

Here’s my .env:

AUTH0_SECRET="56c9b1a92253df2d1.........2e9fc58b29804"
AUTH0_BASE_URL=http://localhost:3000
AUTH0_ISSUER_BASE_URL='https://MY_CUSTOM_SITE.com'
AUTH0_CLIENT_ID='..........'
AUTH0_CLIENT_SECRET='..........'
AUTH0_AUDIENCE="https://MY_CUSTOM_SITE.COM/api/v2/"
AUTH0_SCOPE='openid profile update:users update:current_user_identities'

and I have the changed the external.jsx to fire this function on the click of the Link Accounts button:

  const getAccessToken = async () => {
    const response = await fetch('/api/getAccessToken');
    const { accessToken } = await response.json();
    setAccessToken(accessToken);
    return accessToken;
  };

  const linkAccount = async () => {
    const a0 = new Auth0Client({
      domain: 'MY_CUSTOM_SITE.COM',
      issuer: 'https://MY_CUSTOM_SITE.us.auth0.com',
      client_id: '...............'
    });
    await a0.loginWithPopup({
      max_age: 0,
      scope: 'openid'
    });
    const tokenClaims = await a0.getIdTokenClaims();
    const { __raw: targetUserIdToken } = tokenClaims;
    const accessToken = await getAccessToken();

    let responseData = null;

    const response = await fetch(
      `https://MY_CUSTOM_SITE.COM/api/v2/users/${encodeURIComponent(props.user.sub)}/identities`,
      {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          Authorization: `Bearer ${accessToken}`
        },
        body: JSON.stringify({
          link_with: targetUserIdToken
        })
      }
    );
    responseData = await response.json();

    setIdentities(responseData.identities);

    setState({
      ...state,
      error: undefined,
      response: responseData
    });
  };

and api/getAccessToken.js is very simple:

import { getAccessToken, withApiAuthRequired } from '@auth0/nextjs-auth0';

export default withApiAuthRequired(async function shows(req, res) {
  try {
    const { accessToken } = await getAccessToken(req, res);

    res.status(200).json({ accessToken });
  } catch (error) {
    res.status(error.status || 500).json({ error: error.message });
  }
});

and here is the error from the log:

{
  "date": "2022-05-18T23:00:03.474Z",
  "type": "f",
  "description": "You may have pressed the back button, refreshed during login, opened too many login dialogs, or there is some issue with cookies, since we couldn't find your session. Try logging in again from the application and if the problem persists please contact the administrator.",
  "connection_id": "",
  "ip": "172.2.162.238",
  "user_agent": "Chrome 100.0.4896 / Mac OS X 10.15.7",
  "details": {
    "body": {},
    "qs": {
      "state": "Fe26.2**b339d53e2db4a49d467368917252c76409d9f9dade2481d12cf86d721007b8a7*JKD4dHCBWgwEHJZFVe8Wbg*8RAJA2FWZEaVlNGElDuapLoTkjRtc9_KFCRVDrQ-ZWE**3140ef8a2033f5f56260186da20f03753ab12b7583675dbf1950d17f7ba891d2*FA0kKOR_NcrXa0z93n1eNpNI3KAfj-xFDKIJ1wJrl7I",
      "code": "4/0AX4XfWhFeBF6a9b925SAlzgb081LVkW33Ru4_oIbWv_uITMmFhItielEeTuZjrr4QaT5QQ",
      "scope": "email profile https://www.googleapis.com/auth/userinfo.profile openid https://www.googleapis.com/auth/userinfo.email",
      "authuser": "0",
      "prompt": "none"
    },
    "error": {
      "message": "You may have pressed the back button, refreshed during login, opened too many login dialogs, or there is some issue with cookies, since we couldn't find your session. Try logging in again from the application and if the problem persists please contact the administrator.",
      "oauthError": "invalid_request",
      "type": "request-error"
    },
    "session_id": "oBlBwWHZgBZSl3ptQeWLeZOA9UAulfky"
  },
  "hostname": "MY_CUSTOM_SITE.us.auth0.com",
  "log_id": "90020220518230007774264789146394154044575961067026382866",
  "_id": "90020220518230007774264789146394154044575961067026382866",
  "isMobile": false
}

Now remember, if I switch all of MY_CUSTOM_SITE.COM back to the MY_CUSTOM_SITE.us.auth0.com – this will work. I am using this as a Regular Web App with Token Endpoint Authentication Method being NONE.

So my question is… what am I missing to make this work with custom domains? It works without custom domains…