Social Sign Up and Sign In (nextjs auth0)

I’m attempting to implement a social sign-in and sign up with nextjs auth0. I’d previously implemented it, where when a user would login it would redirect them to the auth0 sign up / sign-in form with my domain and they could use social sign-in / sign-ups, from there.

Since then though, I’ve moved onto an implementation with a custom sign-up form, with different social providers as buttons under the sign-up form. Now I’d like for users to be able to click on the social provider and then be redirected to the corresponding provider sign-in / sign-up page, as opposed to going to the auth0 sign-up form with my domain.

So yeah I’ve been trying to find documentation on how to carry this out, haven’t found something that seems to do what I’m trying to achieve yet though, if anyone could help point in the right direction that would be great!

1 Like

Hi @alkassimk,

Welcome to the Auth0 Community!

If you pass a connection param to your authorize request, you can redirect your user’s to the IdP login page.

Here is the doc for it. Let me know if that solves the issue:

https://auth0.com/docs/api/authentication#social

Thanks for the response Dan,

I just tried that, currently getting a CORs error, even though after I got the error the first time I added localhost to the ‘Allowed CORS’ on the app in the dashboard.

Here’s the error, also is it normal for the URL to appear like this in the console when throwing the error? (I’ve changed the domain name and the client_id).

Access to XMLHttpRequest at ‘https://DOMAINNAME.com/authorize?%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20response_type=token&%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20client_id={CLIENTID}&%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20connection=facebook&%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20redirect_uri=http://localhost:3000/api/auth/callback&%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20state=STATE’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

Following up on this I found the solution to this, however now when I click on a button and it does the request, I can get the redirect url from axios’ response, however when I actually go the url, my redirect_uri is set to local host, however, when I complete the social login I keep being redirected to mydomain.us.auth0.com/login/callback..., not sure exactly wjy

Can you please create a HAR and send it to me in a DM?

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