Configuring and using auth-next

Example Usage:

nuxt.config.js:

export default {
  modules: [
    '@nuxtjs/auth-next',
    '@nuxtjs/axios',
  ],
  auth: {
    strategies: {
      google: {
        clientId: 'YOUR_GOOGLE_CLIENT_ID',
        codeChallengeMethod: '',
        responseType: 'token id_token',
        redirectUri: 'YOUR_REDIRECT_URI',
        endpoints: {
          authorization: 'https://accounts.google.com/o/oauth2/auth',
          userInfo: 'https://www.googleapis.com/oauth2/v3/userinfo',
        },
        scope: ['openid', 'profile', 'email'],
      },
      // Add other providers here
    }
  },
}

Using Auth-Next in a Component:

<template>
  <div>
    <button @click="loginWithGoogle">Login with Google</button>
    <p v-if="$auth.loggedIn">Hello, {{ $auth.user.name }}</p>
  </div>
</template>

<script>
export default {
  methods: {
    loginWithGoogle() {
      this.$auth.loginWith('google');
    }
  }
}
</script>

Summary:

The essential requirement is configuring @nuxtjs/auth-next in your nuxt.config.js and using its features directly in your code.

exonomyapp/nuxt.config.js.md

Example Usage:

Summary: