Implement the ResetPasswordUsingToken Feature Component

[rishabhpoddar]

• import { ResetPasswordUsingToken } from "supertokens-auth-react/recipe/emailpassword"
• The default implementation should be in ${websiteBasePath}/reset-password
• The default theme should be ResetPasswordUsingTokenTheme
• Props for this component (all optional, all must have a default implementation)
• Will pass the following down to the Theme component (along with whatever the user passes):
  • submitNewPasswordForm Object
  • enterEmailForm Object
• They must be responsible to render a shadow-root to prevent CSS clashes
• Should have its own config in the init function as explained in this comment
• If a session exists already and the user visits ${websiteBasePath}/reset-password, with a token in the URL, then continue the flow normally.
• If the user visit ${websiteBasePath}/reset-password without a token in the URL, the enter email form is showed, otherwise the submit new password form is showed
• With a token, then URL format will be ${websiteBasePath}/reset-password?token=...&rid=email-password

[rishabhpoddar]

This is passed down to the theme

submitNewPasswordForm: {
   callAPI: (formFields: {id: "password", value: string}[]) => Promise<{
      status: "FIELD_ERROR"
      fields: {
         id: "password",
         error: string
      }[]
   } | {
      status: "GENERAL_ERROR", message: string
   } | {
      status: "OK" | "RESET_PASSWORD_INVALID_TOKEN_ERROR"
   }>,
   onSuccess: () => void,
   formFields: {
      id: "password",
      label: string,
      placeholder?: string
      validate?: (value) => Promise<string | undefiend>
   }[],
   styleFromInit: {...}
}

[rishabhpoddar]

Init configs for this feature

resetPasswordUsingTokenFeature: {
   disableDefaultImplementation?: boolean,
   onSuccessRedirectURL?: string, // default is websiteBasePath + "/"
   submitNewPasswordForm: {
      style?: {...}
   },
   enterEmailForm: {
      style?: {...}
   }
}

• The email and password validators are taken from the signUp feature as mentioned in in this comment.

• How onSuccessRedirectURL will be used:

  • If onHandleSuccess is not defined or returns false after an action, then the browser is redirected to this URL.

[rishabhpoddar]

This is passed down to the theme

enterEmailForm: {
   callAPI: (formFields: {id: "email", value: string}[]) => Promise<{
      status: "FIELD_ERROR"
      fields: {
         id: "email",
         error: string | undefiend
      }[]
   } | {
      status: "GENERAL_ERROR", message: string
   } | {
      status: "OK"
   }>,
   onSuccess: () => void,
   formFields: {
      id: "email",
      label: string,
      placeholder?: string
      validate?: (value) => Promise<string | undefiend>
   }[],
   styleFromInit: {...}
}

[rishabhpoddar]

Props passed to this component

{
   onHandleSuccess(context: {action: "RESET_PASSWORD_EMAIL_SENT" | "PASSOWRD_RESET_SUCCESSFUL" }): Promise<boolean>,
   onCallSubmitNewPasswordAPI(requestJson, headers): Promise<responseJson>,
   onCallSendResetEmailAPI(requestJson, headers): Promise<responseJson>
}

[rishabhpoddar]

@NkxxkN if we have to split this feature into two in the future (So that the user can put the enter email form wherever they want), then what would the two features be called?

• ResetPasswordUsingTokenSendEmail Feature
• ResetPasswordUsingTokenSubmitNewPassword Feature

[kant01ne]

The default implementation should be in ${websiteBasePath}/reset-password (or /reset/password)

I prefer reset-password because reset/password presumes that you can reset other things reset/email reset/somethings etc..

if we have to split this feature into two in the future (So that the user can put the enter email form wherever they want), then what would the two features be called?

I like your suggestions. Let's use ResetPasswordUsingTokenSendEmail and ResetPasswordUsingTokenSubmitNewPassword

[kant01ne]

How onSuccessRedirectURL will be used:
If onHandleSuccess is not defined or returns false after an action, then the browser is redirected to this URL

By default onSuccessRedirectURL should be /auth/` because you want to redirect the user to login after they reset their password successfully.

[rishabhpoddar]

@NkxxkN , actually, the redirect URL by default should not be /auth/, but should be websiteBasePath + "/". This way, if they change the websiteBasePath, then it will still work.

[rishabhpoddar]

@NkxxkN , we have a prop in the signupin feature called doesSessionExist which the user can provide. Do we also need something similar for this feature?

[kant01ne]

I missed your comment before merging the PR ^

I'm not sure that we need it actually.

In theory we might want to allow a logged in user to reset their password if they'd like which is why I didn't implement doesSessionExist here. Especially since we do not provide any way to reset password while logged in. So no reason to check for doesSessionExist before showing the UI.

In practice, since you need to access the login form and click on "Forgot Password?" link, this will not be possible if a session exists (unless you go specifically to the correct URL).

So our current solution is not ideal. The user might have to logout before they can reset their password.