From 497fa796ec2ef92dc7b191a1c69d6de1d4fa7c82 Mon Sep 17 00:00:00 2001 From: ccatherinetan Date: Mon, 17 Jun 2024 23:59:41 -0700 Subject: [PATCH 1/4] create skeleton --- docs/dev/app/auth.md | 87 +++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 86 insertions(+), 1 deletion(-) diff --git a/docs/dev/app/auth.md b/docs/dev/app/auth.md index c9548b54..aaf821fe 100644 --- a/docs/dev/app/auth.md +++ b/docs/dev/app/auth.md @@ -4,10 +4,95 @@ prev: /dev/app/ # Authentication -Basic structure; feel free to deviate. +## User Auth Flows + +**Log In** + +`src/app/(auth)/login` +- After a successful login, the user is redirected as follows: + - Incomplete onboarding -> onboarding + - Complete onboarding -> listing page corresponding to the user's role + +::: info Rerouting based on Profile Roles +The following applies to any rerouting based on the user's profile roles. If the user is an Attorney/Legal Fellow *and* an Interpreter, the user will be rerouted to the listing page corresponding to their non-interpreter role. This means: if the user's role includes Attorney, they're routed to the `cases` listings page; if their role includes Legal Fellow, they're routed to `limited-case-assignments` listings. The user is only rerouted to `interpretation` listings if their only role is Interpreter. See [Onboarding](./onboarding) for more info about Profile Roles. +::: + +**Sign Up** + +`src/app/(auth)/signup` +- User is sent an email + +**Forgot Password** + +forgot-password -> send reset-password link to email +user clicks link in email -> reset-password + +::: info Access to `reset-password` page +The `reset-password` page is only accessible via the reset-password link sent to the user's email, trigged from the Forgot Password page. If a user routes to `\reset-password` manually, the page will appear blank. +::: ## Supabase +`supabase.auth.getSession`: see Supabase's documentation. + +`supabase.auth.signInWithPassword` + +`supabase.auth.onAuthStateChange` + +`supabase.auth.signInWithPassword` + +`supabase.auth.signOut` + +`supabase.auth.signUp` + ## Contexts +The auth context is provided in `@/utils/AuthProvider`. The context includes the following fields and functions: + +- `session` (optional): **`Session`** + + Obtained from `supabase.auth.getSession`, the `session` is only defined when the user is logged in. + +- `userId` (optional): **`UUID`** + + Obtained from `supabase.auth.getSession`, the `userId` is only defined when the user is logged in; otherwise, it is undefined. Thus, this field is often used to check if the user is logged in. + +- `userEmail`: **`string`** + + Obtained from `supabase.auth.getSession`, the `userEmail` is only defined when the user is logged in; otherwise, it is undefined. + +- `signIn`: **`(email: string, password: string) => Promise`** + + Calls `supabase.auth.signInWithPassword`. + +- `signOut`: **`() => Promise`** + + Calls `supabase.auth.signOut`. + +- `signUp`: **`(email: string, password: string, options: object) => Promise`** + + Calls `supabase.auth.signUp`. + +To create a new auth instance: +```tsx:no-line-numbers +import { useAuth } from '@/utils/AuthProvider'; + +const auth = useAuth(); +``` + ## Sign Up Flow + +New users creating an account for the first time will go through the sign-up flow, handled in `src/app/(auth)/signup`. +1. Users are prompted to create a new account with an email and password. + +Edge Cases +- Attempting to create a new account with an existing user's email: we do not specifically prevent users from creating a new +### Password Complexity + +**Editing Password Complexity Conditions** + +Password complexity conditions can be modified in the PasswordComplexity component. Each requirement is an instance of `PasswordRequirement`. See the codebase (`src/components/PasswordComplexity`) for examples of how `PasswordRequirement` components can be instantiated and used. The current complexity conditions include: +- At least 1 uppercase letter +- At least 1 lowercase letter +- At least 1 number (0-9) +- At least 8 characters \ No newline at end of file From a30939a0a2d3a918e7f93073fc24138085e71e61 Mon Sep 17 00:00:00 2001 From: ccatherinetan Date: Tue, 18 Jun 2024 00:04:40 -0700 Subject: [PATCH 2/4] add login rerouting logic --- docs/dev/app/auth.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/docs/dev/app/auth.md b/docs/dev/app/auth.md index aaf821fe..564babf9 100644 --- a/docs/dev/app/auth.md +++ b/docs/dev/app/auth.md @@ -9,7 +9,8 @@ prev: /dev/app/ **Log In** `src/app/(auth)/login` -- After a successful login, the user is redirected as follows: +- If the user is already logged in, this page will automatically redirect based on the auth and profile contexts. +- After a successful login, the user is redirected based on the profile context, as follows: - Incomplete onboarding -> onboarding - Complete onboarding -> listing page corresponding to the user's role @@ -86,7 +87,7 @@ New users creating an account for the first time will go through the sign-up flo 1. Users are prompted to create a new account with an email and password. Edge Cases -- Attempting to create a new account with an existing user's email: we do not specifically prevent users from creating a new +- Attempting to create a new account with an existing user's email: ### Password Complexity **Editing Password Complexity Conditions** From f5a182f2cd43c26db55a7733203d2629f5c4b361 Mon Sep 17 00:00:00 2001 From: ccatherinetan Date: Thu, 20 Jun 2024 23:02:47 -0700 Subject: [PATCH 3/4] add supabase links --- docs/dev/app/auth.md | 23 ++++++++++++++--------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/docs/dev/app/auth.md b/docs/dev/app/auth.md index 564babf9..e38eecf9 100644 --- a/docs/dev/app/auth.md +++ b/docs/dev/app/auth.md @@ -6,7 +6,7 @@ prev: /dev/app/ ## User Auth Flows -**Log In** +### **Log In** `src/app/(auth)/login` - If the user is already logged in, this page will automatically redirect based on the auth and profile contexts. @@ -18,12 +18,12 @@ prev: /dev/app/ The following applies to any rerouting based on the user's profile roles. If the user is an Attorney/Legal Fellow *and* an Interpreter, the user will be rerouted to the listing page corresponding to their non-interpreter role. This means: if the user's role includes Attorney, they're routed to the `cases` listings page; if their role includes Legal Fellow, they're routed to `limited-case-assignments` listings. The user is only rerouted to `interpretation` listings if their only role is Interpreter. See [Onboarding](./onboarding) for more info about Profile Roles. ::: -**Sign Up** +### **Sign Up** `src/app/(auth)/signup` - User is sent an email -**Forgot Password** +### **Forgot Password** forgot-password -> send reset-password link to email user clicks link in email -> reset-password @@ -34,17 +34,22 @@ The `reset-password` page is only accessible via the reset-password link sent to ## Supabase -`supabase.auth.getSession`: see Supabase's documentation. +Supabase's documentation for all auth functions can be found [here](https://supabase.com/docs/reference/javascript/auth-api). Below, the links take you to the specific section of the documentation for each function. -`supabase.auth.signInWithPassword` +`supabase.auth.getSession`: see [Supabase's documentation](https://supabase.com/docs/reference/javascript/auth-getsession). -`supabase.auth.onAuthStateChange` +`supabase.auth.signInWithPassword`: see [Supabase's documentation](https://supabase.com/docs/reference/javascript/auth-signinwithpassword +). -`supabase.auth.signInWithPassword` +`supabase.auth.onAuthStateChange`: see [Supabase's documentation](https://supabase.com/docs/reference/javascript/auth-onauthstatechange). -`supabase.auth.signOut` +`supabase.auth.signInWithPassword`: see [Supabase's documentation](https://supabase.com/docs/reference/javascript/auth-signinwithpassword). -`supabase.auth.signUp` +`supabase.auth.signOut`: see [Supabase's documentation](https://supabase.com/docs/reference/javascript/auth-signout). + +`supabase.auth.signUp`: see [Supabase's documentation](https://supabase.com/docs/reference/javascript/auth-signup). + +`supabase.auth.resend`: see [Supabase's documentation](https://supabase.com/docs/reference/javascript/auth-resend). ## Contexts From 853cc1e51a90283386c9c47ed2811b1bf81ccd66 Mon Sep 17 00:00:00 2001 From: ccatherinetan Date: Thu, 20 Jun 2024 23:34:52 -0700 Subject: [PATCH 4/4] consolidate sign-up flow --- docs/dev/app/auth.md | 52 ++++++++++++++++++++++++-------------------- 1 file changed, 29 insertions(+), 23 deletions(-) diff --git a/docs/dev/app/auth.md b/docs/dev/app/auth.md index e38eecf9..db966416 100644 --- a/docs/dev/app/auth.md +++ b/docs/dev/app/auth.md @@ -8,8 +8,9 @@ prev: /dev/app/ ### **Log In** -`src/app/(auth)/login` -- If the user is already logged in, this page will automatically redirect based on the auth and profile contexts. +Users with existing accounts can log in with their email accounts and passwords. From `/login`, users can also navigate to `/signup` or `/forgot-password` instead. For implementation, see `src/app/(auth)/login`. + +- If the user is already logged in, the user will be automatically redirected from `/login` to another page based on the auth and profile contexts. - After a successful login, the user is redirected based on the profile context, as follows: - Incomplete onboarding -> onboarding - Complete onboarding -> listing page corresponding to the user's role @@ -20,18 +21,40 @@ The following applies to any rerouting based on the user's profile roles. If the ### **Sign Up** -`src/app/(auth)/signup` -- User is sent an email +New users creating an account for the first time will go through the sign-up flow, handled in `src/app/(auth)/signup`. Users can also navigate from `/signup` to the login flow if they already have an account. + +1. Users are prompted to create a new account with an email and password. +2. If the new account credentials are valid, the user is directed to the `/verification-email-sent` page, indicating that an account-verification email has been sent to them. The user can also choose to resend the email on this page, if they think there has been an error. +3. After the user clicks on the verification-link sent via email, the user is directed to `/email-verified`. From this page, users are directed to navigate back to Onboarding. + +Edge Cases +- Currently, users cannot sign up with an email that is already registered, and they're given a general ("Something went wrong. Please try again.") error message when attempting to do so. +- Accounts that have not been verified are/are not allowed to login regularly and continue to onboarding. ### **Forgot Password** -forgot-password -> send reset-password link to email -user clicks link in email -> reset-password +Implemented in `src/app/(auth)/forgot-password`, the forgot password flow is as follows: + +1. On `/forgot-password`, the user inputs the email associated with their account. After clicking "Send Email", they can choose to click "Resend Email." +2. An email is sent to that email address. +3. After clicking on the link sent via email, the user is directed to `/reset-password`, where they set a new password and confirm the password. +4. If a valid new password is inputted, the user is directed to `/confirm-reset-password`, which instructs the user to navigate to `/login`. + * A new password is considered valid if it meets the same password complexity requirements and is different from previous passwords. The latter condition is checked using Supabase's `verifyNewPassword` function. ::: info Access to `reset-password` page The `reset-password` page is only accessible via the reset-password link sent to the user's email, trigged from the Forgot Password page. If a user routes to `\reset-password` manually, the page will appear blank. ::: +### Password Complexity + +**Editing Password Complexity Conditions** + +Used for both the signup and the forgot-password flow, password complexity conditions can be modified in the PasswordComplexity component. Each requirement is an instance of `PasswordRequirement`. See the codebase (`src/components/PasswordComplexity`) for examples of how `PasswordRequirement` components can be instantiated and used. The current complexity conditions include: +- At least 1 uppercase letter +- At least 1 lowercase letter +- At least 1 number (0-9) +- At least 8 characters + ## Supabase Supabase's documentation for all auth functions can be found [here](https://supabase.com/docs/reference/javascript/auth-api). Below, the links take you to the specific section of the documentation for each function. @@ -85,20 +108,3 @@ import { useAuth } from '@/utils/AuthProvider'; const auth = useAuth(); ``` - -## Sign Up Flow - -New users creating an account for the first time will go through the sign-up flow, handled in `src/app/(auth)/signup`. -1. Users are prompted to create a new account with an email and password. - -Edge Cases -- Attempting to create a new account with an existing user's email: -### Password Complexity - -**Editing Password Complexity Conditions** - -Password complexity conditions can be modified in the PasswordComplexity component. Each requirement is an instance of `PasswordRequirement`. See the codebase (`src/components/PasswordComplexity`) for examples of how `PasswordRequirement` components can be instantiated and used. The current complexity conditions include: -- At least 1 uppercase letter -- At least 1 lowercase letter -- At least 1 number (0-9) -- At least 8 characters \ No newline at end of file