Resetting the Password of an Authenticated User

This document guides you through adding a password reset functionality to your site. This functionality is complex and is a good demonstration of the different features on Insites.

Prerequisites

To follow the steps in this tutorial, you must understand the required directory structure for your codebase, have a test email set up, and understand the concept of pages, users, Tables, Database Fields, and Permissions. In addition, you must know how to create a form.

• Codebase
• Configuring a Test Email
• Pages
• Users
• Database Fields and Tables
• Permissions
• Creating a Sign-Up Form

Steps

Resetting a password is a six-step process:

• Step 1: Create a table to store the password reset request
• Step 2: Create a form to get the user's email
• Step 3: Check the user's email
• Step 4: Store token
• Step 5: Send the email with the password reset instructions
• Step 6: Create the entry point to the workflow

Step 1: Create a Table to Store the Password Reset Request

app/schema/reset_password.yml

Step 2: Create a Form to Get the User's Email

app/forms/recover_password.liquid

Step 3: Check the User's Email

Create a GraphQL query to check if the provided email address has a user associated with it in the database. If yes, generate a temporary token to authenticate the request.

app/graphql/generate_user_temporary_token.graphql

Step 4: Store the Token

If the user exists, store the value of the generated token in a field (Property) associated with the default profile.

app/user_profile_types/default.yml

This way, you can ensure that only the most recent token can be used. To store the actual value, create a GraphQL mutation.

app/graphql/update_password_token.graphql

Each GraphQL mutation has an associated form configuration; in this case, it's .

app/forms/update_password_token.liquid

Step 5: Send the Email with the Password Reset Instructions

app/emails/send_recover_password.liquid

The email relies on a GraphQL query called to fetch the user's first name and the token's value.

app/graphql/get_user_with_password_token.graphql

Step 6: Create the Entry Point to the Workflow

Create a page as an entry point to the workflow.

app/views/pages/recover_password.liquid

app/views/pages/reset-password.liquid

The above page is used to check if the provided token is valid and fetch the user's id based on the email provided in the parameter. Re-use the GraphQL query created earlier.

The page below embeds the form to reset the password.

app/forms/reset_password.liquid

To re-render the previous page, forward the email and token parameters from the email if the password validation fails. The token is also used in an Authorization Policy, where the user is authenticated with this token to ensure they can't change another user's password. You can add more rules to the password field by . By default, the password should be a minimum of six characters long.

Create this Authorization Policy:

app/authorization_policies/token_is_valid.liquid

If the user confirms a valid password, the system changes the password and redirects the user to the page. If the password is invalid, the system re-renders the form and displays a message explaining what is wrong. This concludes the password reset process. Finally, suppose the user tries to hijack someone else's account by manually changing the id or providing an invalid token. In that case, the system returns a 403 status, and the request is not processed.

Next steps

Congratulations! You know how to build a password reset process. Now you can learn about accessing user data: Accessing Authenticated User Data.