feat(app): added redirect path cookie for use after signin

[Matthewenderle]

Added a feature to store the requested route that is outside the scope of the excluded routes. The route is stored in a cookie and disabled by default.

Types of changes

• Bug fix (a non-breaking change which fixes an issue)
• New feature (a non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Description

I needed a way to have my application users be able to share a link to a page with users who potentially would not be registered or logged in. This Pull Request adds a cookie that is set when the client tries to hit a route that is not listed in the redirectOptions.exclude list, it then sets the cookie equal to the route.to.fullPath to include capturing the url parameters.

I couldn't just use the redirectTo when using OAuth because using the redirect: true makes the module's middleware leave the route and always report it as /login. I needed to capture the route BEFORE the Supabase auth-redirect.mjs middleware performed the redirect to the login page.

I set my nuxt.config.ts values to reflect the changes:

export default defineNuxtConfig({
  supabase: {
    redirect: true,
    redirectOptions: {
      login: '/login',
      callback: '/dashboard',
      exclude: ['/', '/register', '/privacy-policy','/confirm'], // MUST have confirm or it will loop to /login every time
      cookieRedirect: true, // Enable the storing of the requested route
    },
  }
  // Rest of your config
});

This pull request has a modification to the /pages/confirm.vue in order to get the cookie.

<script setup lang="ts">
const user = useSupabaseUser();

// Pull in the config to get cookie details
const config = useRuntimeConfig().public.supabase;
const { cookieName } = config;
const redirectPath = useCookie(`${cookieName}-redirect-path`).value;

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

Checklist:

• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have added tests to cover my changes (if not applicable, please state why)

[netlify]

👷 Deploy request for n3-supabase pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	9ca99cd

[larbish]

Hey @Matthewenderle, thanks a lot for you contribution. Your code LGTM, can you just add the new option here and add an example at the end of this section to explain how to use it.

[nuxt-studio]

✅ Live Preview ready!

Name	Edit	Preview	Latest Commit
supabase	Edit on Studio ↗︎	View Live Preview	25e97da

[Matthewenderle]

@larbish I just pushed an amendment to the branch with the docs updated.