Update individual components from Auth UI react to have sane defaults (…

…#139)

.changeset/brave-crabs-sin.md

@@ -0,0 +1,5 @@
+---
+'@supabase/auth-ui-shared': patch
+---
+
+Update shared en localization to include templated variable

.changeset/old-ways-know.md

@@ -0,0 +1,5 @@
+---
+'@supabase/auth-ui-react': patch
+---
+
+Add sane defaults to each individual component

localization/german/de_formal.json

@@ -6,7 +6,7 @@
     "password_input_placeholder": "Ihr Passwort",
     "button_label": "Registrieren",
     "loading_button_label": "Registrieren ...",
-    "social_provider_text": "Anmelden mit",
+    "social_provider_text": "Anmelden mit {{provider}}",
     "link_text": "Haben Sie noch kein Konto? Registrieren"
   },
   "sign_in": {
@@ -16,7 +16,7 @@
     "password_input_placeholder": "Ihr Passwort",
     "button_label": "Anmelden",
     "loading_button_label": "Anmelden ...",
-    "social_provider_text": "Anmelden mit",
+    "social_provider_text": "Anmelden mit {{provider}}",
     "link_text": "Haben Sie bereits ein Konto? Anmelden"
   },
   "magic_link": {

localization/german/de_informal.json

@@ -6,7 +6,7 @@
     "password_input_placeholder": "Dein Passwort",
     "button_label": "Registrieren",
     "loading_button_label": "Registrieren ...",
-    "social_provider_text": "Anmelden mit",
+    "social_provider_text": "Anmelden mit {{provider}}",
     "link_text": "Hast du noch kein Konto? Registrieren"
   },
   "sign_in": {
@@ -16,7 +16,7 @@
     "password_input_placeholder": "Dein Passwort",
     "button_label": "Anmelden",
     "loading_button_label": "Anmelden ...",
-    "social_provider_text": "Anmelden mit",
+    "social_provider_text": "Anmelden mit {{provider}}",
     "link_text": "Hast du bereits ein Konto? Anmelden"
   },
   "magic_link": {

localization/japanese/ja.json

@@ -6,7 +6,7 @@
     "password_input_placeholder": "Your password",
     "button_label": "サインアップ",
     "loading_button_label": "Signing up ...",
-    "social_provider_text": "に登録する",
+    "social_provider_text": "{{provider}} に登録する",
     "link_text": "アカウントをお持ちではありませんか？サインアップ"
   },
   "sign_in": {
@@ -16,7 +16,7 @@
     "password_input_placeholder": "Your password",
     "button_label": "サインイン",
     "loading_button_label": "Signing in ...",
-    "social_provider_text": "に登録する",
+    "social_provider_text": "{{provider}} に登録する",
     "link_text": "Already have an account? Sign in"
   },
   "magic_link": {

package.json

@@ -7,6 +7,10 @@
     "build:react": "turbo run build --filter=@supabase/auth-ui-react",
     "build:solid":"turbo run build --filter=@supabase/auth-ui-solid",
     "build:svelte": "turbo run build --filter=@supabase/auth-ui-svelte",
+    "build:example": "turbo run build:example",
+    "build:example:react": "turbo run build:example --filter=@example/react",
+    "build:example:solid": "turbo run build:example --filter=@example/solid",
+    "build:example:svelte": "turbo run build:example --filter=@example/svelte",
     "dev": "turbo run dev --parallel",
     "lint": "turbo run lint",
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",

packages/react/src/components/Auth/Auth.tsx

@@ -31,26 +31,9 @@ function Auth({
 
   const i18n: I18nVariables = merge(en, localization.variables ?? {})
 
-  /**
-   * Create default theme
-   *
-   * createStitches()
-   * https://stitches.dev/docs/api#theme
-   *
-   * to add a new theme use  createTheme({})
-   * https://stitches.dev/docs/api#theme
-   */
-  createStitches({
-    theme: merge(
-      appearance?.theme?.default ?? {},
-      appearance?.variables?.default ?? {}
-    ),
-  })
-
   const [authView, setAuthView] = useState(view)
   const [defaultEmail, setDefaultEmail] = useState('')
   const [defaultPassword, setDefaultPassword] = useState('')
-  const [themes, setThemes] = useState({})
 
   /**
    * Simple boolean to detect if authView 'sign_in' or 'sign_up' is used
@@ -60,28 +43,13 @@ function Auth({
   const SignView = authView === 'sign_in' || authView === 'sign_up'
 
   useEffect(() => {
-    const themessss: any = {}
-    const themeKeys = appearance?.theme && Object.keys(appearance?.theme)
-
-    if (themeKeys) {
-      appearance.theme &&
-        Object.values(appearance.theme).map((theme, i) => {
-          const key = themeKeys[i]
-          // ignore default theme
-          if (key === 'default') return {}
-
-          const merged = merge(
-            (appearance && appearance.theme && appearance.theme[key]) ?? {},
-            (appearance && appearance.variables && appearance.variables[key]) ??
-              {}
-          )
-
-          themessss[themeKeys[i]] = merged
-        })
-    }
-
-    setThemes(themessss)
-  }, [])
+    createStitches({
+      theme: merge(
+        appearance?.theme?.default ?? {},
+        appearance?.variables?.default ?? {}
+      ),
+    })
+  }, [appearance])
 
   /**
    * Wraps around all auth components

packages/react/src/components/Auth/interfaces/EmailAuth.tsx

@@ -7,23 +7,26 @@ import {
   ViewSignIn,
   ViewsMap,
   ViewType,
+  merge,
 } from '@supabase/auth-ui-shared'
 import { Appearance } from './../../../types'
 import { Anchor, Button, Container, Input, Label, Message } from './../../UI'
+import { createStitches, createTheme } from '@stitches/core'
 
 export interface EmailAuthProps {
   authView: ViewSignIn | ViewSignUp
-  defaultEmail: string
-  defaultPassword: string
-  setAuthView: any
-  setDefaultEmail: (email: string) => void
-  setDefaultPassword: (password: string) => void
+  defaultEmail?: string
+  defaultPassword?: string
+  setAuthView?: any
+  setDefaultEmail?: (email: string) => void
+  setDefaultPassword?: (password: string) => void
   supabaseClient: SupabaseClient
   showLinks?: boolean
   redirectTo?: RedirectTo
   magicLink?: boolean
   i18n: I18nVariables
   appearance?: Appearance
+  theme?: 'default' | string
 }
 
 const VIEWS: ViewsMap = {
@@ -36,17 +39,18 @@ const VIEWS: ViewsMap = {
 
 function EmailAuth({
   authView = 'sign_in',
-  defaultEmail,
-  defaultPassword,
-  setAuthView,
-  setDefaultEmail,
-  setDefaultPassword,
+  defaultEmail = '',
+  defaultPassword = '',
+  setAuthView = () => {},
+  setDefaultEmail = (email) => {},
+  setDefaultPassword = (password) => {},
   supabaseClient,
-  showLinks = true,
+  showLinks = false,
   redirectTo,
   magicLink,
   i18n,
   appearance,
+  theme = 'default',
 }: EmailAuthProps) {
   const isMounted = useRef<boolean>(true)
   const [email, setEmail] = useState(defaultEmail)
@@ -60,10 +64,19 @@ function EmailAuth({
     setEmail(defaultEmail)
     setPassword(defaultPassword)
 
+    if (theme !== 'default') {
+      createStitches({
+        theme: merge(
+          appearance?.theme?.default ?? {},
+          appearance?.variables?.default ?? {}
+        ),
+      })
+    }
+
     return () => {
       isMounted.current = false
     }
-  }, [authView])
+  }, [authView, appearance])
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault()
@@ -86,8 +99,8 @@ function EmailAuth({
           email,
           password,
           options: {
-	    emailRedirectTo: redirectTo
-	  }
+            emailRedirectTo: redirectTo,
+          },
         })
         if (signUpError) setError(signUpError.message)
         // Check if session is null -> email confirmation setting is turned on
@@ -120,6 +133,17 @@ function EmailAuth({
       onSubmit={handleSubmit}
       autoComplete={'on'}
       style={{ width: '100%' }}
+      className={
+        theme !== 'default'
+          ? createTheme(
+              merge(
+                // @ts-ignore
+                appearance?.theme[theme],
+                appearance?.variables?.[theme] ?? {}
+              )
+            )
+          : undefined
+      }
     >
       <Container direction="vertical" gap="large" appearance={appearance}>
         <Container direction="vertical" gap="large" appearance={appearance}>

packages/react/src/components/Auth/interfaces/ForgottenPassword.tsx

@@ -1,29 +1,54 @@
 import { SupabaseClient } from '@supabase/supabase-js'
-import React, { useState } from 'react'
-import { VIEWS, I18nVariables, RedirectTo } from '@supabase/auth-ui-shared'
+import React, { useEffect, useRef, useState } from 'react'
+import {
+  VIEWS,
+  I18nVariables,
+  RedirectTo,
+  merge,
+} from '@supabase/auth-ui-shared'
 import { Appearance } from '../../../types'
 import { Anchor, Button, Container, Input, Label, Message } from './../../UI'
+import { createStitches, createTheme } from '@stitches/core'
 
 function ForgottenPassword({
-  setAuthView,
+  setAuthView = () => {},
   supabaseClient,
   redirectTo,
   i18n,
   appearance,
-  showLinks,
+  showLinks = false,
+  theme = 'default',
 }: {
-  setAuthView: any
+  setAuthView?: any
   supabaseClient: SupabaseClient
   redirectTo?: RedirectTo
   i18n: I18nVariables
   appearance?: Appearance
   showLinks?: boolean
+  theme?: 'default' | string
 }) {
+  const isMounted = useRef<boolean>(true)
   const [email, setEmail] = useState('')
   const [error, setError] = useState('')
   const [message, setMessage] = useState('')
   const [loading, setLoading] = useState(false)
 
+  useEffect(() => {
+    isMounted.current = true
+    if (theme !== 'default') {
+      createStitches({
+        theme: merge(
+          appearance?.theme?.default ?? {},
+          appearance?.variables?.default ?? {}
+        ),
+      })
+    }
+
+    return () => {
+      isMounted.current = false
+    }
+  }, [appearance])
+
   const handlePasswordReset = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault()
     setError('')
@@ -40,7 +65,21 @@ function ForgottenPassword({
   const labels = i18n?.forgotten_password
 
   return (
-    <form id="auth-forgot-password" onSubmit={handlePasswordReset}>
+    <form
+      id="auth-forgot-password"
+      onSubmit={handlePasswordReset}
+      className={
+        theme !== 'default'
+          ? createTheme(
+              merge(
+                // @ts-ignore
+                appearance?.theme[theme],
+                appearance?.variables?.[theme] ?? {}
+              )
+            )
+          : undefined
+      }
+    >
       <Container gap="large" direction="vertical" appearance={appearance}>
         <Container gap="large" direction="vertical" appearance={appearance}>
           <div>