Social Login

Learn how to use social logins like Google, Github, etc.

Nuxt Auth Utils provides a collection of social logins that you can use in your site.

Supersaas provides two examples, one for Google and one for Github. You can find the code in

  1. server/api/auth/google.get.js
  2. server/api/auth/github.get.js

Setting up the providers

All you need to do is set the respective providers credentials in you .env file.

  • NUXT_OAUTH_PROVIDER_CLIENT_ID
  • NUXT_OAUTH_PROVIDER_CLIENT_SECRET

or if you need a more explicit way, you can set them in your nuxt.config.ts file

nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    oauth: {
      <provider>: {
        clientId: process.env.NUXT_OAUTH_<PROVIDER>_CLIENT_ID,
        clientSecret: process.env.NUXT_OAUTH_<PROVIDER>_CLIENT_SECRET,
      }
    }
  }
})

Supported OAuth Providers

  • Auth0
  • AWS Cognito
  • Battle.net
  • Discord
  • Facebook
  • GitHub
  • Google
  • Keycloak
  • LinkedIn
  • Microsoft
  • PayPal
  • Spotify
  • Steam
  • Twitch
  • X (Twitter)
  • XSUAA
  • Yandex

Please find more about Nuxt Auth Utils here