mobile favicon

Authentication

Authenticate your user thanks to the PKCE Oauth protocol that enables secure exchange of refresh and access tokens between an application and the authorization server

With the default options, the module requires a log-in page and a confirm page to handle the PKCE authorization code flow. If you want to understand how it works under the hood, you can read this section.

All you need to do is to create a login.vue and confirm.vue page in the pages folder.

For advanced users who want to implement the auth behaviour themselves, you can disable or override the redirect options.

Log-in page - /login

Each time a user is trying to access a page that needs authentication, he will automatically be redirected to the configured log in page. If you want to allow access to "public" page, you just need to add them in the exclude redirect option.

Ensure to activate the authentication providers you want in the Supabase Dashboard under Authentication -> Providers.

The log-in page initiates the log-in method(s) you choose from the available authorization methods provided by Supabase, it could looks like:

pages/login.vue
<script setup lang="ts">
const supabase = useSupabaseClient()
const email = ref('')

const signInWithOtp = async () => {
  const { error } = await supabase.auth.signInWithOtp({
    email: email.value,
    options: {
      emailRedirectTo: 'http://localhost:3000/confirm',
    }
  })
  if (error) console.log(error)
}
</script>
<template>
  <div>
    <button @click="signInWithOtp">
      Sign In with E-Mail
    </button>
    <input
      v-model="email"
      type="email"
    />
  </div>
</template>

Once the authorization flow is triggered using the auth wrapper of the useSupabaseClient composable, the session management is handled automatically and the user will be redirected to the page you specify in the redirect option (/confirm by default).

Confirm page - /confirm

The confirmation page receives the supabase callback. From there you can check the user value and redirect to the appropriate page.

The redirect URL must be configured in your Supabase dashboard under Authentication -> URL Configuration -> Redirect URLs.
pages/confirm.vue
<script setup lang="ts">
const user = useSupabaseUser()

watch(user, () => {
  if (user.value) {
      // Redirect to protected page
      return navigateTo('/')
  }
}, { immediate: true })
</script>

<template>
  <div>Waiting for login...</div>
</template>

Redirect path

You can easily handle redirection to the initial requested route after login.

You must enable the cookieRedirect option of the redirectOptions to allow cookie storage and take benefit of this feature.
pages/confirm.vue
<script setup lang="ts">
const user = useSupabaseUser()

// Get redirect path from cookies
const cookieName = useRuntimeConfig().public.supabase.cookieName
const redirectPath = useCookie(`${cookieName}-redirect-path`).value

watch(user, () => {
  if (user.value) {
      // Clear cookie
      useCookie(`${cookieName}-redirect-path`).value = null
      // Redirect to path
      return navigateTo(redirectPath || '/'); 
  }
}, { immediate: true })
</script>
<template>
  <div>Waiting for login...</div>
</template>

Made with Nuxt Studio