Docs/UI library vue nuxt password auth (supabase#39405)

* docs: ui library password auth vue

* docs: ui library password auth nuxt

* Fix a pnpm-lock conflict.

* Adjust paths

* Fix import path

* Rebuild

* docs: remove shadcn-vue package

* Fix the pnpm-lock.

---------

Co-authored-by: Ivan Vasilov <[email protected]>
Co-authored-by: Terry Sutton <[email protected]>

Author: 3 people

apps/docs/package.json

@@ -153,6 +153,7 @@
     "graphiql": "^4.0.2",
     "openapi-types": "^12.1.3",
     "postcss": "^8.5.3",
+    "tailwindcss": "catalog:",
     "shiki": "^3.2.1",
     "shx": "^0.4.0",
     "simple-git": "^3.24.0",

apps/ui-library/config/docs.ts

@@ -61,7 +61,7 @@ export const componentPages: SidebarNavGroup = {
     },
     {
       title: 'Password-Based Auth',
-      supportedFrameworks: ['nextjs', 'react-router', 'tanstack', 'react'],
+      supportedFrameworks: ['nextjs', 'react-router', 'tanstack', 'react', 'vue', 'nuxtjs'],
       href: '/docs/nextjs/password-based-auth',
       items: [],
       commandItemLabel: 'Password-Based Auth',

apps/ui-library/content/docs/nuxtjs/password-based-auth.mdx

@@ -0,0 +1,83 @@
+---
+title: Password-based Authentication
+description: Password-based authentication block for Nuxt.js
+---
+
+<BlockPreview name="password-based-auth/auth/sign-up" />
+
+## Installation
+
+<BlockItem
+  name="password-based-auth-nuxtjs"
+  description="All needed components for the password based auth flow"
+/>
+
+## Folder structure
+
+This block assumes that you have already installed a Supabase client for Nuxt from the previous step.
+
+<RegistryBlock itemName="password-based-auth-nuxtjs" />
+
+## Usage
+
+Once you install the block in your Next.js project, you'll get all the necessary pages and components to set up a password-based authentication flow.
+
+### Getting started
+
+After installing the block, you'll have the following environment variables in your `.env.local` file:
+
+```env
+NUXT_PUBLIC_SUPABASE_URL=
+NUXT_PUBLIC_SUPABASE_PUBLISHABLE_OR_ANON_KEY=
+```
+
+- If you're using supabase.com, you can find these values in the [Connect modal](https://supabase.com/dashboard/project/_?showConnect=true) under App Frameworks or in your project's [API settings](https://supabase.com/dashboard/project/_/settings/api).
+
+- If you're using a local instance of Supabase, you can find these values by running `supabase start` or `supabase status` (if you already have it running).
+
+### Adding email templates
+
+1. Add an [email template for sign-up](https://supabase.com/dashboard/project/_/auth/templates) to the Supabase project. Your signup email template should contain at least the following HTML:
+
+   ```html
+   <h2>Confirm your signup</h2>
+
+   <p>Follow this link to confirm your user:</p>
+   <p>
+     <a
+       href="{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=email&next={{ .RedirectTo }}"
+       >Confirm your email</a
+     >
+   </p>
+   ```
+
+   For detailed instructions on how to configure your email templates, including the use of variables like `{{ .SiteURL }}`,`{{ .TokenHash }}`, and `{{ .RedirectTo }}`, refer to our [Email Templates guide](https://supabase.com/docs/email-templates).
+
+1. Add an [email template for reset password](https://supabase.com/dashboard/project/_/auth/templates) to the Supabase project. Your reset password email template should contain at least the following HTML:
+
+   ```html
+   <h2>Reset Password</h2>
+
+   <p>Follow this link to reset the password for your user:</p>
+   <p>
+     <a
+       href="{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=recovery&next={{ .RedirectTo }}"
+       >Reset Password</a
+     >
+   </p>
+   ```
+
+### Setting up routes and redirect URLs
+
+1. Set the site URL in the [URL Configuration](https://supabase.com/dashboard/project/_/auth/url-configuration) settings in the Supabase Dashboard.
+1. Set up the Next.js route that users will visit to reset or update their password. Go to the [URL Configuration](https://supabase.com/dashboard/project/_/auth/url-configuration) settings and add the `forgot-password` route to the list of Redirect URLs. It should look something like: `http://example.com/auth/forgot-password`.
+
+1. Update the redirect paths in `login-form.vue` and `update-password-form.vue` components to point to the logged-in routes in your app. Our examples use `/protected`, but you can set this to whatever fits your app.
+
+## Further reading
+
+- [Password-based authentication (PKCE flow)](https://supabase.com/docs/guides/auth/passwords?queryGroups=flow&flow=pkce)
+- [Authentication error codes](https://supabase.com/docs/guides/auth/debugging/error-codes)
+- [Email templates](https://supabase.com/docs/guides/auth/auth-email-templates)
+- [Email templates for local development](https://supabase.com/docs/guides/local-development/customizing-email-templates)
+- [Custom SMTP](https://supabase.com/docs/guides/auth/auth-smtp)

apps/ui-library/content/docs/vue/password-based-auth.mdx

@@ -0,0 +1,75 @@
+---
+title: Password-based Authentication
+description: Password-based authentication block for Vue Single Page Applications
+---
+
+<BlockPreview name="password-based-auth/auth/sign-up" />
+
+## Installation
+
+<BlockItem
+  name="password-based-auth-vue"
+  description="All needed components for the password based auth flow"
+/>
+
+## Folder structure
+
+This block assumes that you have already installed a Supabase client for Vue from the previous step.
+
+<RegistryBlock itemName="password-based-auth-vue" />
+
+## Usage
+
+Once you install the block in your Vue project, you'll get all the necessary components to set up a password-based authentication flow.
+
+### Getting started
+
+After installing the block, you'll have the following environment variables in your `.env.local` file:
+
+```env
+VITE_SUPABASE_URL=
+VITE_SUPABASE_PUBLISHABLE_OR_ANON_KEY=
+```
+
+- If you're using supabase.com, you can find these values in the [Connect modal](https://supabase.com/dashboard/project/_?showConnect=true&tab=frameworks&framework=vuejs&using=supabasejs) under App Frameworks or in your project's [API keys](https://supabase.com/dashboard/project/_/settings/api-keys).
+
+- If you're using a local instance of Supabase, you can find these values by running `supabase start` or `supabase status` (if you already have it running).
+
+### Setting up routes and redirect URLs
+
+1. Set the site URL in the [URL Configuration](https://supabase.com/dashboard/project/_/auth/url-configuration) settings in the Supabase Dashboard.
+1. Set up the route users will visit to reset or update their password. Go to the [URL Configuration](https://supabase.com/dashboard/project/_/auth/url-configuration) settings and add the `forgot-password` route to the list of Redirect URLs. It should look something like: `http://example.com/auth/forgot-password`.
+1. Update the redirect paths in `login.vue` and `update-password.vue` components to point to the logged-in routes in your app. Our examples use `/protected`, but you can set this to whatever fits your app.
+
+1. Add the following code in the authenticated route to redirect to login if the user is unauthenticated.
+
+```vue
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { createClient } from '@/lib/supabase/client'
+
+onMounted(async () => {
+  const client = createClient()
+
+  const { error } = await client.auth.getUser()
+
+  if (error) {
+    location.href = '/login'
+  }
+})
+</script>
+
+<template>
+  <div>Authenticated page</div>
+</template>
+```
+
+Additionally, you could utilize the Navigation Guards from `vue-router` explained [here](https://router.vuejs.org/guide/advanced/navigation-guards#Global-Before-Guards).
+
+## Further reading
+
+- [Password-based authentication (implicit flow)](https://supabase.com/docs/guides/auth/passwords?queryGroups=flow&flow=implicit)
+- [Authentication error codes](https://supabase.com/docs/guides/auth/debugging/error-codes)
+- [Email templates](https://supabase.com/docs/guides/auth/auth-email-templates)
+- [Email templates for local development](https://supabase.com/docs/guides/local-development/customizing-email-templates)
+- [Custom SMTP](https://supabase.com/docs/guides/auth/auth-smtp)

apps/ui-library/public/llms.txt

@@ -1,5 +1,5 @@
 # Supabase UI Library
-Last updated: 2025-10-15T07:54:48.550Z
+Last updated: 2025-11-06T16:46:13.786Z
 
 ## Overview
 Library of components for your project. The components integrate with Supabase and are shadcn compatible.
@@ -33,6 +33,8 @@ Library of components for your project. The components integrate with Supabase a
     - Social authentication block for Next.js
 - [Supabase Client Libraries](https://supabase.com/ui/docs/nuxtjs/client)
     - Supabase client for Nuxt.js
+- [Password-based Authentication](https://supabase.com/ui/docs/nuxtjs/password-based-auth)
+    - Password-based authentication block for Nuxt.js
 - [Platform Kit](https://supabase.com/ui/docs/platform/platform-kit)
     - The easiest way to build platforms on top of Supabase
 - [Supabase Client Libraries](https://supabase.com/ui/docs/react-router/client)
@@ -85,3 +87,5 @@ Library of components for your project. The components integrate with Supabase a
     - Social authentication block for Tanstack Start
 - [Supabase Client Libraries](https://supabase.com/ui/docs/vue/client)
     - Supabase client for Vue Single Page Applications
+- [Password-based Authentication](https://supabase.com/ui/docs/vue/password-based-auth)
+    - Password-based authentication block for Vue Single Page Applications