Creating custom login screen in Auth0

Help
, , ,
1

Hi, we are planning to

  • Use custom template & create our own login screen.
  • Use custom template(same one above) & create our own signup screen with additional fields (which we will save a user_metadata.
  • Custom domain to host the screen.
  • In our nextjs app we plan to use login button(/api/auth/login?screen=login) & signup button(/api/auth/login?screen=signup) & pass a query parameter to read in the custom template & show relevant screen (unlike the tabs in default UI).

Right now, we are using UL(classic). But we are unable to read the query parameter. How can we achieve the above??

2

Was too quick to post the question. Found the solution. Responding here incase anyone else needs this.

  • “handleAuth” function in @auth0/nextjs-auth0 library needs to be overridden.
const getLoginState = (req, loginOptions) => {
  const { returnTo = null } = req.query;

  return {
    returnTo: returnTo ? returnTo : process.env.LOGIN_REDIRECT
  };
};

export default handleAuth({
  async callback(req, res) {
    try {
      await handleCallback(req, res);
    } catch (error) {
      res.status(error.status || 500).end(error.message);
    }
  },
  async login(req, res) {
    await handleLogin(req, res, { getLoginState, authorizationParams: {
      screen_hint: req?.query?.screen_hint
    } });
  },
});

And when user passes ‘/api/auth/login?screen_hint=abcd’, that “abcd” gets added to authorizationParams, inturn getting added to config → extraParams → screen_hint (inside the login template code.

1 Like
3

No worries! We’ve all been there! Thanks for sharing with the rest of community!