For this, I will take the GOOGLE SignIn as an example.
So here is the step-by-step guide to do this:
First 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/