DEV Community

Hussain Ahmed Siddiqui
Hussain Ahmed Siddiqui

Posted on • Updated on

OAuth-SUPABASE-NEXTJS

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

Image description

Then goto API & Services, and update the javascript origins
to add in the credentials section:

Image description

And add the redirect URL:

Image description
You can get this URL from the providers section in the authentication of the specific provider

Image description

And also update the URL configuration in the authentication and also add the redirect urls

Create Server and Browser side supabase clients:

Server Client:

Image description

Browser Client

Image description

Now on the login component, on the frontend side:
For this first create generateCodeVerifier() and generateCodeChallenge() utils functions

Image description

Now create a function for the Google signIn button:

Image description

Next step is to create the get request for /auth/callback route

Image description

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.

Image description

Now on the client side after the user logged in session needs to be updated there:

Image description

For any query reach me on Linkedin:
https://www.linkedin.com/in/mernstack-webdeveloper-reactjs-nextjs/

Top comments (1)

Collapse
 
hussain101 profile image
Hussain Ahmed Siddiqui

@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!