fix: auth password reset

.changeset/cool-beds-sit.md

@@ -0,0 +1,5 @@
+---
+'@saas-ui/auth': patch
+---
+
+Fixed issue where success message would not render on forgot password view

.changeset/five-dancers-hope.md

@@ -0,0 +1,5 @@
+---
+'@saas-ui/auth': patch
+---
+
+Allow view prop to controlled with new onViewChange handler

.changeset/polite-lemons-punch.md

@@ -0,0 +1,5 @@
+---
+'@saas-ui/supabase': patch
+---
+
+Fixed issue where update password would not execute

packages/saas-ui-auth/src/components/auth-form.tsx

@@ -16,8 +16,8 @@ import { cx } from '@chakra-ui/utils'
 
 import { FieldErrors } from '@saas-ui/forms'
 
-import { Providers, AvailableProviders } from './forms/providers'
-import { AuthTypeEnum, AuthActionEnum, useAuth } from '../provider'
+import { AvailableProviders } from './forms/providers'
+import { AuthTypeEnum, AuthActionEnum } from '../provider'
 
 const [StylesProvider, useStyles] = createStylesContext('SuiAuthForm')
 
@@ -80,7 +80,7 @@ export interface AuthFormOptions {
    */
   oauthRedirectUrl?: string
   /**
-   * The redirecet URL after succesful magic link or password login
+   * The redirect URL after succesful OAuth or Magic link login
    */
   redirectUrl?: string
   /**

packages/saas-ui-auth/src/components/auth.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { chakra, Link } from '@chakra-ui/react'
+import { chakra, Link, useControllableState } from '@chakra-ui/react'
 
 import { AuthFormOptions } from './auth-form'
 import { LoginView, SignupView } from './login-view'
@@ -21,8 +21,13 @@ export const VIEWS = {
 type ValueOf<T> = T[keyof T]
 type ViewType = ValueOf<typeof VIEWS>
 
+export type RedirectViews =
+  | typeof VIEWS.LOGIN
+  | typeof VIEWS.SIGNUP
+  | typeof VIEWS.FORGOT_PASSWORD
+
 export interface AuthProps
-  extends AuthFormOptions,
+  extends Omit<AuthFormOptions, 'redirectUrl'>,
     Omit<
       FormProps<any, any>,
       'title' | 'action' | 'defaultValues' | 'onSubmit' | 'onError' | 'children'
@@ -37,6 +42,10 @@ export interface AuthProps
    * - otp
    */
   view?: ViewType
+  /**
+   * Called when the view changes.
+   */
+  onViewChange?(view: ViewType): void
   /**
    * The OAuth providers that are supported.
    */
@@ -77,11 +86,17 @@ export interface AuthProps
    * @param error
    */
   onError?: (view: ViewType, error: Error) => void
+  /**
+   * The redirect URL after succesful login
+   * This property is passed down to the auth service
+   */
+  redirectUrl?: string | ((view: RedirectViews) => string | undefined)
 }
 
 export const Auth: React.FC<AuthProps> = (props) => {
   const {
     view = VIEWS.LOGIN,
+    onViewChange,
     providers,
     signupLink = 'Sign up',
     loginLink = 'Log in',
@@ -90,16 +105,19 @@ export const Auth: React.FC<AuthProps> = (props) => {
     noAccount = 'No account yet?',
     haveAccount = 'Already have an account?',
     onError,
+    redirectUrl,
     ...rest
   } = props
 
   const { type } = rest
 
-  const [authView, setAuthView] = React.useState(view)
-
-  React.useEffect(() => {
-    setAuthView(view)
-  }, [view])
+  const [authView, setAuthView] = useControllableState<ViewType>({
+    defaultValue: 'login',
+    value: view,
+    onChange: (view) => {
+      onViewChange?.(view)
+    },
+  })
 
   const errorHandler = React.useCallback(
     (view: ViewType) => (error: Error) => {
@@ -110,6 +128,16 @@ export const Auth: React.FC<AuthProps> = (props) => {
     [authView]
   )
 
+  const getRedirectUrl = React.useCallback(
+    (view: RedirectViews) => {
+      if (typeof redirectUrl === 'function') {
+        return redirectUrl(view)
+      }
+      return redirectUrl
+    },
+    [redirectUrl]
+  )
+
   switch (authView) {
     case VIEWS.LOGIN:
       return (
@@ -123,6 +151,7 @@ export const Auth: React.FC<AuthProps> = (props) => {
               link={signupLink}
             />
           }
+          redirectUrl={getRedirectUrl(VIEWS.LOGIN)}
           {...rest}
         >
           {type === 'password' &&
@@ -152,6 +181,7 @@ export const Auth: React.FC<AuthProps> = (props) => {
               link={loginLink}
             />
           }
+          redirectUrl={getRedirectUrl(VIEWS.SIGNUP)}
           {...rest}
         />
       )
@@ -165,6 +195,7 @@ export const Auth: React.FC<AuthProps> = (props) => {
               link={backLink}
             />
           }
+          redirectUrl={getRedirectUrl(VIEWS.FORGOT_PASSWORD)}
           {...rest}
         />
       )

packages/saas-ui-auth/src/components/forgot-password-view.tsx

@@ -1,6 +1,11 @@
 import { SubmitHandler } from '@saas-ui/forms'
 import { useResetPassword } from '../provider'
-import { AuthFormContainer, AuthFormTitle, AuthViewOptions } from './auth-form'
+import {
+  AuthFormContainer,
+  AuthFormOptions,
+  AuthFormTitle,
+  AuthViewOptions,
+} from './auth-form'
 import {
   ForgotPasswordForm,
   ForgotPasswordFormProps,
@@ -12,6 +17,10 @@ export interface ForgotPasswordViewProps
   extends AuthViewOptions,
     Omit<ForgotPasswordFormProps, 'title' | 'action' | 'onError' | 'onSubmit'> {
   renderSuccess?: (data: any) => React.ReactElement
+  /**
+   * The URL where the user can save their new password.
+   */
+  redirectUrl?: string
 }
 
 export const ForgotPasswordView: React.FC<ForgotPasswordViewProps> = (
@@ -29,25 +38,28 @@ export const ForgotPasswordView: React.FC<ForgotPasswordViewProps> = (
         description="Please check your email for instructions to reset your password."
       />
     ),
+    redirectUrl,
     ...rest
   } = props
 
   const [{ data, isResolved }, submit] = useResetPassword()
 
   const handleSubmit: SubmitHandler<ForgotPasswordSubmitParams> = (params) => {
-    return submit(params).then(onSuccess).catch(onError)
+    return submit(params, {
+      redirectTo: redirectUrl,
+    })
+      .then(onSuccess)
+      .catch(onError)
   }
 
-  const isSuccess = isResolved && data
-
   return (
     <AuthFormContainer>
       {typeof title === 'string' ? (
         <AuthFormTitle>{title}</AuthFormTitle>
       ) : (
         title
       )}
-      {isSuccess ? (
+      {isResolved ? (
         renderSuccess(data)
       ) : (
         <ForgotPasswordForm

packages/saas-ui-supabase/src/supabase.ts

@@ -29,15 +29,6 @@ interface OtpParams extends AuthParams {
   otp: string
 }
 
-const getParams = (): RecoveryParams => {
-  const hash = window.location.hash.replace('#', '')
-  return hash.split('&').reduce<any>((memo, part) => {
-    const [key, value] = part.split('=')
-    memo[key] = value
-    return memo
-  }, {})
-}
-
 interface SupabaseServiceAuthOptions {
   loginOptions?: {
     data?: object
@@ -264,15 +255,11 @@ export const createAuthService = <Client extends SupabaseClient>(
   const onUpdatePassword = async ({
     password,
   }: Required<Pick<AuthParams, 'password'>>) => {
-    const params = getParams()
-
-    if (params?.type === 'recovery') {
-      const { error } = await supabase.auth.updateUser({
-        password,
-      })
-      if (error) {
-        throw error
-      }
+    const { error } = await supabase.auth.updateUser({
+      password,
+    })
+    if (error) {
+      throw error
     }
   }