Nuxt3 Discord Authentication Example

Nuxt3 Discord Authentication Example - nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  modules: [
    '@nuxt-alt/auth', // https://www.npmjs.com/package/@nuxt-alt/auth
    '@pinia/nuxt',
  ],
  auth: {
    redirect: {
      login: '/auth/login',
      logout: '/auth/logout',
      home: '/',
      callback: '/auth/callback', // dont forget to add this path as a redirect in Discord Developer Portal
    },
    strategies: {
      discord: { // https://auth.nuxtjs.org/providers/discord
        clientId: '{{clientid}}',
        clientSecret: '{{clientsecret}}',
      },
    },
  },
});

pages-auth-callback.vue

<script setup lang="ts">

console.log("callback");

</script>

<template>
  <div>
    <NuxtWelcome />
  </div>
</template>

pages-auth-login.vue

<script setup lang="ts">

console.log(useAuth().loginWith('discord'));

</script>

<template>
  <div>
    <NuxtWelcome />
  </div>
</template>

pages-auth-logout.vue

<script setup lang="ts">

  console.log('logout');
  useAuth().logout();

</script>

<template>
  <div>
    <NuxtWelcome />
  </div>
</template>

pages-index.vue

<script setup>
  console.log(useAuth().user);

  const { user } = useAuth();
</script>

<template>
  <div>
    {{ user }}
    <NuxtLink to="/auth/login">
      Log in with discord
    </NuxtLink>
    <NuxtWelcome />
  </div>
</template>