[feat] new success and verification pages with full functionality EXC… #37
Conversation
…EPT automatic rerouting from verification to success is not yet functional
app/(auth)/verification/page.tsx
Outdated
| import { | ||
| getTempEmail, | ||
| resendVerificationEmail, | ||
| } from '@/api/supabase/queries/auth'; | ||
| import Bud from '@/public/images/bud.svg'; | ||
| import EmailIcon from '@/public/images/email.svg'; | ||
| // import supabase from '@/api/supabase/createClient'; |
There was a problem hiding this comment.
delete the commented line
There was a problem hiding this comment.
fixed in latest commit!
| import { | ||
| getTempEmail, | ||
| resendVerificationEmail, | ||
| } from '@/api/supabase/queries/auth'; | ||
| import Bud from '@/public/images/bud.svg'; | ||
| import EmailIcon from '@/public/images/email.svg'; | ||
| // import supabase from '@/api/supabase/createClient'; | ||
| import { useSession } from '@/utils/AuthProvider'; | ||
| import { |
There was a problem hiding this comment.
replace ../../../styles/styles to @/styles/styles
There was a problem hiding this comment.
fixed in latest commit!
There was a problem hiding this comment.
instead of using <text> tags, import this line on the top of the file import { P } from '@/styles/text; and then use the <P> tag. you can adjust the font weight by passing in weight as a prop: <P $fontWeight={300}>. also, since styling such as EmailContainer, EmailText etc. are not being used in any other files, create a separate styles.ts file under verification since styles/styles.ts file is only for GLOBALLY used styled components.
There was a problem hiding this comment.
fixed in latest commit!
…path directories, and removed local styles from global styles file
* created querying functions * created AvailabilityCard component and added to general page * changed styling and updates colors file to include new pomegranate color * resolved ESLint errors * added message for no availabilities * updated to reflect new design and implemented content moving when menubar is expanded * changed design for date range on availability card
…path directories, and removed local styles from global styles file
…EPT automatic rerouting from verification to success is not yet functional
🍞 What's new in this PR
🥐 Description
The verification page notifies users that their email needs to be verified, and provides them with options to use another account and to resend the verification link to their email. It displays pertinent error messages if any issues with resending the email. The success page confirms successful verification of user's email.
There remains one issue, which is that verification does not automatically redirect to success once the user's email is verified. Discussed this with Celine during worksession—the reason for this is that the auth session is still null before log in, but log in is not possible without successful verification. This makes retrieving user data difficult. Going to OH to debug/explore this further. However, the front-end styling and resend link functionality on the verification page.
Additionally, I slightly refactored styling, taking styles for these two new success and verification pages and placing them into a global styles/styles.ts file. The styled components are compatible with Melissa's onboarding pages, meaning that she should be able to import from global styles/styles.ts instead of the onboarding styles without issues. The sign-up and sign-in pages still use the styles in auth-styles.ts, so this can be refactored too as needed.
Finally, I fixed a bug with the auth context by creating a new function ensureLoggedOutForNewUser that ensures a user who is already signed-in is logged out when a new sign-up or sign-in is initiated. I am not preventing signed-in users from signing in with a new account or signing up for a new account, but rather, when signed in users do either of the following things, they will automatically be signed out and then signed in to the "newer" account.
🥖 Screenshots
🥪 How to review
Key front-end changes are in success and verification folders under app/auth, as well as the global styles/styles.ts file.
On the back-end side, I made the ensureLoggedOutForNewUser function in auth.ts under the api/supabase/queries folder.
I also made some small changes to back-end in api/supabase/queries/auth.ts and utils/AuthContextProvider.tsx (basically just storing the user's email address in localStorage during sign-up and retrieving it on the verification page so that the website can display the email address while the auth session is null before verification).
I would just test sign-up flow with the auth dashboard open https://supabase.com/dashboard/project/paifoskjfzbjbiehraqj/auth/users
🥧 Next steps
As I mentioned, verification does not automatically redirect to success once the user's email is verified. Will update after OH.
Potentially might wanna restyle the error message on verification when there is no email address from signup.
🥞 Relevant links
🥨 Online sources
🥯 Related PRs
CC: @celinechoiii