Google OAuth Login Setup

README.md

README.md

These instructions outline how to add Google Oauth as a provider to supabase, and then how to use it in Nuxt.

Steps

Step 1: set up a project in google cloud

• navigate to cloud.google.com and set up an account if you haven't already
• set up a new project

Step 2: Enable Google in Supabase

• In Authentication, go to providers and enable google
• Next you need to get the api keys (client id and client secret)

Step 3: Set up oauth credentials

• search for the oauth consent screen in google cloud
• enable external for public users
• add your email to user support email
• add the project name
• add an email for developer email
• if you have a logo and a domain, add those things as well.

Step 4: Set up credentials

• go to Credentials in the side bar
• Create OAuth client Id from the +Create Credentials menu
• set it up as a web application
• get your redirect/callback url (found the google provider supabase menu)
• add the redirect to google cloud

Step 5: Add the credentials to supabase

• you will be given a client id and secret from google
• add these to the correct fields in supabase

Step 6: Add the Oauth functionality to your app

• import supabase client `const supabase = useSupabaseClient()
• create an async function and use the following method in it:

const { error } = supabase.auth.signInWithOAuth({
  provider: "google",
});
if (error) {
  console.error(error);
}

• add that function to a button on your page

Step 7: Convert your Oauth login into a composable (a logic component)

• create a file in /composables/ - like googleOauthLogin.js
• add your async function to it
• To use the filename as the function name: add export default in front of the function and remove the function name
  • ie:

    export default function () {
      // add the code here
    }

---

Summary

• This is fairly easy to set up. Other auth providers will have a similar workflow but the console process in the provider's respective dashboard might be a bit different.
• To verify the login and see your jwt auth tokens, use the dev tools and go to the application tab
  • in cookies and localStorage you'll see the different access tokens enabled
  • try logging out to make them disappear

Resources

• Supabase Auth Deepdive OAuth
• Supabase Auth Deepdive JSON Web Tokens