Creating custom login screen in Auth0

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??

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

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