Update Svelte and React package with event listener for password reset (

#145)
supabase-community · Mar 1, 2023 · 121e88d · 121e88d
1 parent cf66245
commit 121e88d
Show file tree

Hide file tree

Showing 24 changed files with 152 additions and 309 deletions.
diff --git a/.changeset/calm-onions-greet.md b/.changeset/calm-onions-greet.md
@@ -0,0 +1,6 @@
+---
+'@supabase/auth-ui-solid': patch
+'@supabase/auth-ui-svelte': patch
+---
+
+Add html input autofocus
diff --git a/.changeset/lazy-nails-allow.md b/.changeset/lazy-nails-allow.md
@@ -0,0 +1,6 @@
+---
+'@supabase/auth-ui-react': patch
+'@supabase/auth-ui-svelte': patch
+---
+
+Add event listener to show update form on password reset
diff --git a/.changeset/smooth-glasses-exercise.md b/.changeset/smooth-glasses-exercise.md
@@ -0,0 +1,5 @@
+---
+'@supabase/auth-ui-react': patch
+---
+
+Add full relative file names for ESM in Node
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -12,7 +12,9 @@
   "types": "./dist/index.d.ts",
   "type": "module",
   "exports": {
+    "./package.json": "./package.json",
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.es.js",
       "require": "./dist/index.cjs.js"
     }

diff --git a/packages/react/src/components/Auth/Auth.tsx b/packages/react/src/components/Auth/Auth.tsx
@@ -95,7 +95,18 @@ function Auth({
     /**
      * Overrides the authview if it is changed externally
      */
+    const { data: authListener } = supabaseClient.auth.onAuthStateChange(
+      (event) => {
+        if (event === 'PASSWORD_RECOVERY') {
+          setAuthView('update_password')
+        } else if (event === 'USER_UPDATED') {
+          setAuthView('sign_in')
+        }
+      }
+    )
     setAuthView(view)
+
+    return () => authListener.subscription.unsubscribe()
   }, [view])
 
   const emailProp: Omit<EmailAuthProps, 'authView' | 'id'> = {

diff --git a/packages/react/src/components/Auth/index.tsx b/packages/react/src/components/Auth/index.tsx
@@ -1,2 +1,2 @@
-export { default as Auth } from './Auth'
-export * from './interfaces'
+export { default as Auth } from './Auth.js'
+export * from './interfaces/index.js'
diff --git a/packages/react/src/components/Auth/interfaces/EmailAuth.tsx b/packages/react/src/components/Auth/interfaces/EmailAuth.tsx
@@ -5,14 +5,18 @@ import {
   RedirectTo,
   ViewSignUp,
   ViewSignIn,
-  ViewsMap,
+  VIEWS,
   ViewType,
-  merge,
-  en,
 } from '@supabase/auth-ui-shared'
 import { Appearance } from './../../../types'
-import { Anchor, Button, Container, Input, Label, Message } from './../../UI'
-import { createStitches, createTheme } from '@stitches/core'
+import {
+  Anchor,
+  Button,
+  Container,
+  Input,
+  Label,
+  Message,
+} from './../../UI/index.js'
 
 export interface EmailAuthProps {
   authView?: ViewSignIn | ViewSignUp
@@ -27,15 +31,6 @@ export interface EmailAuthProps {
   magicLink?: boolean
   i18n?: I18nVariables
   appearance?: Appearance
-  theme?: 'default' | string
-}
-
-const VIEWS: ViewsMap = {
-  SIGN_IN: 'sign_in',
-  SIGN_UP: 'sign_up',
-  FORGOTTEN_PASSWORD: 'forgotten_password',
-  MAGIC_LINK: 'magic_link',
-  UPDATE_PASSWORD: 'update_password',
 }
 
 function EmailAuth({
@@ -51,7 +46,6 @@ function EmailAuth({
   magicLink,
   i18n,
   appearance,
-  theme = 'default',
 }: EmailAuthProps) {
   const isMounted = useRef<boolean>(true)
   const [email, setEmail] = useState(defaultEmail)
@@ -60,27 +54,15 @@ function EmailAuth({
   const [loading, setLoading] = useState(false)
   const [message, setMessage] = useState('')
 
-  // Setting default lang to english
-  i18n = merge(en, i18n ?? {})
-
   useEffect(() => {
     isMounted.current = true
     setEmail(defaultEmail)
     setPassword(defaultPassword)
 
-    if (theme !== 'default') {
-      createStitches({
-        theme: merge(
-          appearance?.theme?.default ?? {},
-          appearance?.variables?.default ?? {}
-        ),
-      })
-    }
-
     return () => {
       isMounted.current = false
     }
-  }, [authView, appearance])
+  }, [authView])
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault()
@@ -137,17 +119,6 @@ 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}>

diff --git a/packages/react/src/components/Auth/interfaces/ForgottenPassword.tsx b/packages/react/src/components/Auth/interfaces/ForgottenPassword.tsx
@@ -1,15 +1,15 @@
 import { SupabaseClient } from '@supabase/supabase-js'
-import React, { useEffect, useRef, useState } from 'react'
-import {
-  VIEWS,
-  I18nVariables,
-  RedirectTo,
-  merge,
-  en,
-} from '@supabase/auth-ui-shared'
+import React, { useState } from 'react'
+import { VIEWS, I18nVariables, RedirectTo } from '@supabase/auth-ui-shared'
 import { Appearance } from '../../../types'
-import { Anchor, Button, Container, Input, Label, Message } from './../../UI'
-import { createStitches, createTheme } from '@stitches/core'
+import {
+  Anchor,
+  Button,
+  Container,
+  Input,
+  Label,
+  Message,
+} from './../../UI/index.js'
 
 function ForgottenPassword({
   setAuthView = () => {},
@@ -18,41 +18,19 @@ function ForgottenPassword({
   i18n,
   appearance,
   showLinks = false,
-  theme = 'default',
 }: {
   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)
 
-  // Setting default lang to english
-  i18n = merge(en, i18n ?? {})
-
-  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('')
@@ -69,21 +47,7 @@ function ForgottenPassword({
   const labels = i18n?.forgotten_password
 
   return (
-    <form
-      id="auth-forgot-password"
-      onSubmit={handlePasswordReset}
-      className={
-        theme !== 'default'
-          ? createTheme(
-              merge(
-                // @ts-ignore
-                appearance?.theme[theme],
-                appearance?.variables?.[theme] ?? {}
-              )
-            )
-          : undefined
-      }
-    >
+    <form id="auth-forgot-password" onSubmit={handlePasswordReset}>
       <Container gap="large" direction="vertical" appearance={appearance}>
         <Container gap="large" direction="vertical" appearance={appearance}>
           <div>

diff --git a/packages/react/src/components/Auth/interfaces/MagicLink.tsx b/packages/react/src/components/Auth/interfaces/MagicLink.tsx
@@ -1,15 +1,15 @@
 import { SupabaseClient } from '@supabase/supabase-js'
-import React, { useEffect, useRef, useState } from 'react'
-import {
-  VIEWS,
-  I18nVariables,
-  RedirectTo,
-  merge,
-  en,
-} from '@supabase/auth-ui-shared'
+import React, { useState } from 'react'
+import { VIEWS, I18nVariables, RedirectTo } from '@supabase/auth-ui-shared'
 import { Appearance } from '../../../types'
-import { Anchor, Button, Container, Input, Label, Message } from './../../UI'
-import { createStitches, createTheme } from '@stitches/core'
+import {
+  Anchor,
+  Button,
+  Container,
+  Input,
+  Label,
+  Message,
+} from './../../UI/index.js'
 
 function MagicLink({
   setAuthView = () => {},
@@ -18,41 +18,19 @@ function MagicLink({
   i18n,
   appearance,
   showLinks = false,
-  theme = 'default',
 }: {
   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)
 
-  // Setting default lang to english
-  i18n = merge(en, i18n ?? {})
-
-  useEffect(() => {
-    isMounted.current = true
-    if (theme !== 'default') {
-      createStitches({
-        theme: merge(
-          appearance?.theme?.default ?? {},
-          appearance?.variables?.default ?? {}
-        ),
-      })
-    }
-
-    return () => {
-      isMounted.current = false
-    }
-  }, [appearance])
-
   const handleMagicLinkSignIn = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault()
     setError('')
@@ -70,21 +48,7 @@ function MagicLink({
   const labels = i18n?.magic_link
 
   return (
-    <form
-      id="auth-magic-link"
-      onSubmit={handleMagicLinkSignIn}
-      className={
-        theme !== 'default'
-          ? createTheme(
-              merge(
-                // @ts-ignore
-                appearance?.theme[theme],
-                appearance?.variables?.[theme] ?? {}
-              )
-            )
-          : undefined
-      }
-    >
+    <form id="auth-magic-link" onSubmit={handleMagicLinkSignIn}>
       <Container gap="large" direction="vertical" appearance={appearance}>
         <Container gap="large" direction="vertical" appearance={appearance}>
           <div>