Custom Sign-Up Page Integration in Next.js 13 Application with Auth0

Help
,
1

Hello community,

I hope you’re all doing well. I’m currently working on a Next.js 13 application and I’m looking to implement a custom sign-up page that includes “Continue with Google” and “Continue with GitHub” buttons. I have followed the QuickStart section in the Auth0 dashboard’s Applications tab, but I’m encountering an issue where clicking the “Login” button redirects me to the Universal Login page, which displays my social connection options.

My goal is to bypass this Universal Login page and instead create a custom sign-up page on my website where users can directly click on “Continue with Google” or “Continue with GitHub” buttons, which will then redirect them to the respective social login links.

I’ve researched this issue extensively, but I couldn’t find any up-to-date information or documentation on how to achieve this specific customization. Could someone please provide guidance on how to implement this in a Next.js application while maintaining the security and functionality of Auth0?

Your assistance and expertise would be greatly appreciated. Thank you in advance for your help!

Best regards,

2

You can use Auth0’s Lock library. Lock allows you to customize thee login experience and integrate social login buttons directly into your custom sign-up page. You can find the necessary documentation and examples in the Auth0 documentation for Next.js. MyEnvoyAir

3

You will need to use the embedded login feature of auth0.

You can find information here - Auth0.js v9 Reference

I have used it in the following way - https://github.com/jiffy-labs/jiffyscan-frontend/blob/development/src/context/session.tsx .

1 Like
4

Hi @gautamgsabhahit thanks a lot for response. I tried auth0-js followed your given link in Next js 13 application. Everything is working fine however when user clicks on “Continue with Google” button , a popup or a new window tab opens and when user selects an email, it is opening redirect URL with access token in the same popup window . Not redirecting back to Home as i provided in redirect_URL.

Means now two windows are open 1. http://localhost:3000/ on which i have Login button and 2. http://localhost:3000/#access_tokenHere (after selecting email going to 2nd)

I’m getting error in webAuth.popup.authorize function => “User closed the popup window” . I’m Unable to get user info.

Here’s Github https://github.com/BushraHussain/auth0-social-login/blob/main/src/app/page.tsx