Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork30
🔒 Pre-built Auth UI base on Supabase for Vue
License
supa-kit/auth-ui-vue
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Pre-built auth widgets to get started in minutes.
preview.mp4
auth-ui-vue is a pre-built, customizableVue component for authenticating users base onsupabase
Customizable authentication UI component with custom themes and extensible styles to match your brand and aesthetic.
- Auth UI Vue
To start using the library in Vue 3, install these in your project:
pnpm install @supabase/supabase-js @supabase/auth-ui-shared @supa-kit/auth-ui-vue -Doryarn add @supabase/supabase-js @supabase/auth-ui-shared @supa-kit/auth-ui-vue -D
<!-- App.vue --><template> ...<Auth:supabaseClient="supabaseClient":appearance="{ theme: ThemeSupa, brand: 'emerald' }"/> ...</template><scriptsetuplang="ts">// Import predefined themeimport{ThemeSupa}from'@supabase/auth-ui-shared'import{createClient}from'@supabase/supabase-js'import{Auth}from'@supa-kit/auth-ui-vue'constsupabaseClient=createClient('<INSERT PROJECT URL>','<INSERT PROJECT ANON API KEY>')</script>
To begin, install theSupabase module for Nuxt. Theauth-ui-vue integration is seamless with this module.
Or, You can choose to use it in the same way as in Vue 3.
Here's a example work with@nuxtjs/supabase:
First install these in your project:
pnpm install @nuxtjs/supabase @supabase/auth-ui-shared @supa-kit/auth-ui-vue -Doryarn add @nuxtjs/supabase @supabase/auth-ui-shared @supa-kit/auth-ui-vue -D
Add@nuxtjs/supabase to the modules section ofnuxt.config.ts:
// nuxt.config.tsexportdefaultdefineNuxtConfig({modules:['@nuxtjs/supabase']})
AddSUPABASE_URL andSUPABASE_KEY to the .env:
SUPABASE_URL="<INSERT PROJECT URL>"SUPABASE_KEY="<INSERT PROJECT ANON API KEY>"
Now, you can access thesupabase client everywhere inside your vue components.
<!-- App.vue --><template> ...<Auth:supabaseClient="supabaseClient":appearance="{ theme: ThemeSupa }"/> ...</template><scriptsetuplang="ts">// Import predefined themeimport{ThemeSupa}from'@supabase/auth-ui-shared'import{Auth}from'@supa-kit/auth-ui-vue'constsupabaseClient=useSupabaseClient()</script>
The Auth component also supports login withofficial social providers.
<!-- App.vue --><template> ...<Auth:supabaseClient="supabaseClient":appearance="{ theme: ThemeSupa, }":providers="['google', 'facebook', 'twitter']"/> ...</template><scriptsetuplang="ts">// Import predefined themeimport{ThemeSupa}from'@supabase/auth-ui-shared'import{createClient}from'@supabase/supabase-js'import{Auth}from'@supa-kit/auth-ui-vue'constsupabaseClient=createClient('<INSERT PROJECT URL>','<INSERT PROJECT ANON API KEY>')</script>
Options are available viaqueryParams:
<template> ...<Auth:supabaseClient="supabaseClient":providers="['google']":queryParams="{ access_type: 'offline', prompt: 'consent', hd: 'domain.com' }"onlyThirdPartyProviders/> ...</tempalte>
The Auth component is currently shipped with the following views:
<template> ...<Auth:supabaseClient="supabaseClient":providers="['google']"v-model:view="authView":redirectTo="redirectTo"/> ...</tempalte><scriptsetuplang="ts">constauthView=ref('sign_in')constredirectTo=computed(()=>{returnauthView.value==='forgotten_password' ?FORGOTTEN_PASSWORD_URL :REDIRECT_TO_URL})</script>
The Auth component is currently supportAnonymous user login.For this you need to create an anonymous user
const{ data, error}=awaitsupabase.auth.signInAnonymously()
Enable manual linking in supabase
Currently works for magic link and social login.If you use password login, you need user to update password after he
There are several ways to customize Auth UI:
- Use one of thepredefined themes that comes with Auth UI
- Extend a theme byoverriding the variable tokens in a theme
- Create your own theme
- Use your own CSS classes
- Use inline styles
- Use your own labels
Auth UI comes with several themes to customize the appearance. Each predefined theme comes with at least two variations, adefault variation, and adark variation. You can switch between these themes using thetheme prop. Import the theme you want to use and pass it to theappearance.theme prop.
<!-- App.vue --><!-- {/* Apply predefined theme */} --><template> ...<Auth:supabaseClient="supabaseClient":appearance="{ theme: ThemeSupa, }"/> ...</template><scriptsetuplang="ts">// Import predefined themeimport{ThemeSupa}from'@supabase/auth-ui-shared'import{createClient}from'@supabase/supabase-js'import{Auth}from'@supa-kit/auth-ui-vue'constsupabaseClient=createClient('<INSERT PROJECT URL>','<INSERT PROJECT ANON API KEY>')</script>
Currently there is only one predefined theme available, but we plan to add more.
Auth UI comes with two theme variations:default anddark. You can switch between these themes with thetheme prop.
<!-- App.vue --><!-- {/* Set theme to dark */} --><template> ...<Auth:supabaseClient="supabaseClient":appearance="{ theme: ThemeSupa, }"theme="dark"/> ...</template><scriptsetuplang="ts">// Import predefined themeimport{ThemeSupa}from'@supabase/auth-ui-shared'import{createClient}from'@supabase/supabase-js'import{Auth}from'@supa-kit/auth-ui-vue'constsupabaseClient=createClient('<INSERT PROJECT URL>','<INSERT PROJECT ANON API KEY>')</script>
If you don't pass a value totheme it uses the"default" theme. You can pass"dark" to the theme prop to switch to thedark theme. If your theme has other variations, use the name of the variation in this prop.
Auth UI themes can be overridden using variable tokens. See thelist of variable tokens.
<!-- App.vue --><template> ...<Auth:supabaseClient="supabaseClient":appearance="{ theme: ThemeSupa, variables: { default: { colors: { brand: 'red', brandAccent: 'darkred' } } } }"/> ...</template><scriptsetuplang="ts">// Import predefined themeimport{ThemeSupa}from'@supabase/auth-ui-shared'import{createClient}from'@supabase/supabase-js'import{Auth}from'@supa-kit/auth-ui-vue'constsupabaseClient=createClient('<INSERT PROJECT URL>','<INSERT PROJECT ANON API KEY>')</script>
If you created your own theme, you may not need to override any of the them.
You can create your own theme by following the same structure within aappearance.theme property.See the list oftokens within a theme.
<!-- App.vue --><template> ...<Auththeme="default":supabaseClient="supabaseClient":appearance="{ theme: customTheme }"/> ...</template><scriptsetuplang="ts">import{createClient}from'@supabase/supabase-js'import{Auth}from'@supa-kit/auth-ui-vue'constcustomTheme={default:{colors:{brand:'hsl(153 60.0% 53.0%)',brandAccent:'hsl(154 54.8% 45.1%)',brandButtonText:'white'// ..}},dark:{colors:{brandButtonText:'white',defaultButtonBackground:'#2e2e2e',defaultButtonBackgroundHover:'#3e3e3e'//..}},// You can also add more theme variations with different names.evenDarker:{colors:{brandButtonText:'white',defaultButtonBackground:'#1e1e1e',defaultButtonBackgroundHover:'#2e2e2e'//..}}}constsupabaseClient=createClient('<INSERT PROJECT URL>','<INSERT PROJECT ANON API KEY>')</script>
You can swich between different variations of your theme with the"theme" prop.
You can use custom CSS classes for the following elements:"button","container","anchor","divider","label","input","loader","message".
<!-- App.vue --><!-- // If you want to extend the default styles instead of overriding it, set "extend" to true --><template> ...<Auth:supabaseClient="supabaseClient":appearance="{ extend: false, className: { anchor: 'my-awesome-anchor', button: 'my-awesome-button', //.. } }"/> ...</template><scriptsetuplang="ts">import{createClient}from'@supabase/supabase-js'import{Auth}from'@supa-kit/auth-ui-vue'constsupabaseClient=createClient('<INSERT PROJECT URL>','<INSERT PROJECT ANON API KEY>')</script>
You can use custom CSS inline styles for the following elements:"button","container","anchor","divider","label","input","loader","message".
<!-- App.vue --><template> ...<Auth:supabaseClient="supabaseClient":appearance="{ style: { button: { background: 'red', color: 'white' }, anchor: { color: 'blue' }, //.. } }"/> ...</template><scriptsetuplang="ts">import{createClient}from'@supabase/supabase-js'import{Auth}from'@supa-kit/auth-ui-vue'constsupabaseClient=createClient('<INSERT PROJECT URL>','<INSERT PROJECT ANON API KEY>')</script>
You can use custom labels with localization.variables. See thelist of labels that can be overwritten.
<!-- App.vue --><template> ...<Auth:supabaseClient="supabaseClient":localization="{ variables: { sign_in: { email_label: 'Your email address', password_label: 'Your strong password' } } }"/> ...</template><scriptsetuplang="ts">import{createClient}from'@supabase/supabase-js'import{Auth}from'@supa-kit/auth-ui-vue'constsupabaseClient=createClient('<INSERT PROJECT URL>','<INSERT PROJECT ANON API KEY>')</script>
auth-ui-vue providesUserContextProvider to passing the supabaseuser andsession data into the component tree.
This will be useful when the sub-components need to access theuser data at any time in the project.
<!-- App.vue (parent component) --><template><UserContextProvider:supabaseClient="supabaseClient"><Profile/></UserContextProvider></template><scriptsetuplang="ts">import{createClient}from'@supabase/supabase-js'import{UserContextProvider}from'@supa-kit/auth-ui-vue'importProfilefrom'@/components/Profile.vue'constsupabaseClient=createClient('<INSERT PROJECT URL>','<INSERT PROJECT ANON API KEY>')</script>
<!-- Profile.vue (children component) --><template><!-- Read the supabase user data --> {{ user.email }}</template><scriptlang="ts"setup>import{injectStrict,UserContextProviderInjection,UserContextProviderKey}from'@supa-kit/auth-ui-vue'const{ user}=injectStrict<UserContextProviderInjection>(UserContextProviderKey)</script>
Once logged in, you can access supabase user everywhere inside your vue components.
Or you can protect your authenticated routes by watching the user's state, here is an example:
<template><!-- Access the supabase user data --> {{ supabaseUser.email }}</template><scriptlang="ts"setup>import{createClient}from'@supabase/supabase-js'constsupabaseClient=createClient('<INSERT PROJECT URL>','<INSERT PROJECT ANON API KEY>')const{ supabaseUser}=useSupabaseUser(supabaseClient)watch(()=>supabaseUser.value,(user)=>{if(!user){returnrouter.push('/login')}},{immediate:true})</script>
- @supabase/auth-ui-react - Pre-built Auth UI for React.
About
🔒 Pre-built Auth UI base on Supabase for Vue
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Sponsor this project
Uh oh!
There was an error while loading.Please reload this page.
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors5
Uh oh!
There was an error while loading.Please reload this page.