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

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/