For this, I will take the GOOGLE SignIn as an example.
So here is the step-by-step guide to do this:
First, create an account on the Google console
Login into it and create a project.
Goto the credentials sections and copy the Client ID and Client secret and paste it to the Authentication >> providers
and paste it into the Google Provider
Then goto API & Services, and update the javascript origins
to add in the credentials section:
And add the redirect URL:
You can get this URL from the providers section in the authentication of the specific provider
And also update the URL configuration in the authentication and also add the redirect urls
Create Server and Browser side supabase clients:
Server Client:
Browser Client
Now on the login component, on the frontend side:
For this first create generateCodeVerifier() and generateCodeChallenge() utils functions
Now create a function for the Google signIn button:
Next step is to create the get request for /auth/callback route
We need a code verifier, as we have passed it on to the callback URL. This will provide the session, and store the tokens in the cookies so that they can be accessible by the middleware of nextjs.
Now, you have to update the middleware:
Access the token and pass it to the supabase setsession function.
Now on the client side after the user logged in session needs to be updated there:
For any query reach me on Linkedin:
https://www.linkedin.com/in/mernstack-webdeveloper-reactjs-nextjs/
Top comments (1)
@yuricodesbot hey! I faced the issue of codeverifier during integration in the exchangecodesession. According to this https://supabase.com/docs/guides/auth/social-login/auth-google?queryGroups=environment&environment=client&queryGroups=framework&framework=nextjs there is no need of codeVerifier but I still got the error! So I solved this, as provided in this article!