# Creating custom login screen in Auth0

**URL:** <https://community.auth0.com/t/creating-custom-login-screen-in-auth0/95988>\
**Category:** Get Help\
**Tags:** react, signup, custom-login, login\
**Created:** [December 8, 2022, 7:32am UTC](https://community.auth0.com/t/creating-custom-login-screen-in-auth0/95988 "2022-12-08T07:32:39Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![platform-admin](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/platform-admin/32/34862_2.png) [@platform-admin](https://community.auth0.com/u/platform-admin)\
**Post date:** [December 8, 2022, 7:32am UTC](https://community.auth0.com/t/creating-custom-login-screen-in-auth0/95988/1 "2022-12-08T07:32:39Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![platform-admin](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/platform-admin/32/34862_2.png) [@platform-admin](https://community.auth0.com/u/platform-admin)\
**Post date:** [December 8, 2022, 8:07am UTC](https://community.auth0.com/t/creating-custom-login-screen-in-auth0/95988/2 "2022-12-08T08:07:29Z")

</div>

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.

```auto
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.

---

<div class="post-metadata">

**Author:** ![konrad.sopala](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/konrad.sopala/32/13516_2.png) [@konrad.sopala](https://community.auth0.com/u/konrad.sopala)\
**Post date:** [December 8, 2022, 11:45am UTC](https://community.auth0.com/t/creating-custom-login-screen-in-auth0/95988/3 "2022-12-08T11:45:33Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![konrad.sopala](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/konrad.sopala/32/13516_2.png) [@konrad.sopala](https://community.auth0.com/u/konrad.sopala)\
**Post date:** [December 21, 2022, 3:26pm UTC](https://community.auth0.com/t/creating-custom-login-screen-in-auth0/95988/4 "2022-12-21T15:26:22Z")

</div>