Auth0-js popup.authorize callback gives error "generic_error" with description "Something went wrong"

Help
1

How should I go about debugging this error when using popup.authorize?

{"error":"generic_error","errorDescription":"Something went wrong"}

My redirectUri sends the html file,

<html>
  <body>
    <script src="https://cdn.auth0.com/js/auth0/9.11/auth0.min.js"></script>
    <script type="text/javascript">
      var webAuth = new auth0.WebAuth({
        domain:       <my domain>,
        clientID:     <my client id>
      });
      webAuth.popup.callback();
    </script>
  </body>
</html>

And I initiate the request like so.

  const google = () => {
    webAuth.popup.authorize({
      domain: activeConfig.client.auth.domain,
      clientId: activeConfig.client.auth.clientId,
      audience: activeConfig.client.auth.audience,
      redirectUri: `${activeConfig.client.app.url}${checkoutSocialAuthCB}`,
      connection: 'google-oauth2',
      responseType: 'code',
      scope: 'openid profile email offline_access',
    }, (err: auth0.Auth0Error | null, res: auth0.Auth0Result) => {
      if (err) {
        console.error(`Could not social auth. '${JSON.stringify(err)}'`);
        throw err;
      }
      console.log(res);
    });

When I check the auth0 dashboard logs I actually see successful log-ins. How can I go about diagnosing this issue?

image
image702×81 6.15 KB

2

The problem was that when using reponseType: 'code' as an option, I was not redirecting the popup window to the proper url. See the correct code below

  // frontend
  const webAuth = new auth0.WebAuth({
    domain: activeConfig.client.auth.domain,
    clientID: activeConfig.client.auth.clientId
  });
  const google = () => {
    webAuth.popup.authorize({
      domain: activeConfig.client.auth.domain,
      clientId: activeConfig.client.auth.clientId,
      audience: activeConfig.client.auth.audience,
      redirectUri: `${activeConfig.client.app.url}${popupSocialAuthCB}`,
      connection: 'google-oauth2',
      responseType: 'code',
      scope: 'openid profile email offline_access',
    }, (err: auth0.Auth0Error | null, res: auth0.Auth0Result) => {
      if (err) {
        console.error(`Could not social auth. '${JSON.stringify(err)}'`);
        throw err;
      }
      console.log(res);
    });
  }

 // server.ts
app.use(popupSocialAuthCB, handlePopupSocialAuth);

 // authenticate.ts
const storeTokensInCookies = async (req: express.Request, res: express.Response, stateRedirectCookie: string) => {
  try {
    const code = req.query.code;
    const state = req.query.state;
    if (state !== stateRedirectCookie) throw new Error(`Bad nonce '${state}'`);
    const authRes = await fetch(`https://${activeConfig.server.auth.domain}/oauth/token`, {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        grant_type: 'authorization_code',
        audience: activeConfig.server.auth.audience,
        client_id: activeConfig.server.auth.clientId,
        client_secret: activeConfig.server.auth.secret,
        code,
        redirect_uri: `${activeConfig.server.app.url}${popupSocialAuthCB}`
      }),
    });
    const data =  await authRes.json();
    if (!authRes.ok) {
      const msg = `Token retrieval failed. '${JSON.stringify(data)}'`;
      console.error(msg);
      throw new Error(msg)
    }
    res.cookie(accessTokenCookie, data.access_token, {
      httpOnly: true,
      // secure: true,
    });
    res.cookie(refreshTokenCookie, data.refresh_token, {
      httpOnly: true,
      // secure: true,
    });
    return data
  } catch (e) {
    console.error(`[Authenticate] Couldn't get auth tokens`, e.stack);
    throw e;
  }
}

export const handlePopupSocialAuth = async (req: express.Request, res: express.Response) => {
  try {
    const state = JSON.parse(decodeURI(req.cookies[`com.auth0.auth.${req.query.state}`])).state;
    const {
      access_token,
      id_token,
      scope,
      expires_in,
      token_type,
    } = await storeTokensInCookies(req, res, state);

    // redirect so popup window has data in url to pass back to parent window
    res.redirect(`${activeConfig.server.app.url}/popup-auth`
      + `#access_token=${access_token}`
      + `&scope=${scope}`
      + `&expires_in=${expires_in}`
      + `&token_type=${token_type}`
      + `&state=${state}`
      + `&id_token=${id_token}`
    );
  } catch (e) {
    console.error(`[Authenticate] Couldn't handle popup auth callback`, e.stack);
    res.status(500).send('Could not log you in');
  }
}

// frontend, Next.js React SSR rendered for path of /popup-auth
// popup-auth.tsx
import auth0 from 'auth0-js';
import { activeConfig } from '../config';
import { isServer } from '../client/utils/isServer';

const CheckoutSocialAuth = () => {
  if (isServer()) return null;
  const webAuth = new auth0.WebAuth({
    domain: activeConfig.client.auth.domain,
    clientID: activeConfig.client.auth.clientId
  });
  webAuth.popup.callback({
    // the default value of when left undefined, but typescript complains so we explictly specify
    hash: window.location.hash
  });
  return <div>Logging in</div>;
}

export default CheckoutSocialAuth;
2 Likes
3

The problem was that when…

Hi @simonlvuong,

are you saying, that resolved the issue? Or still having problems?

4

all resolved. thanks for checking in!

2 Likes
5

Perfect to hear that! Thanks for letting us know!

6

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