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 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/

The above is the detailed content of OAuth-SUPABASE-NEXTJS. For more information, please follow other related articles on the PHP Chinese website!