[CM Wallets Phase 1] Onboarding flow

Summary

In this first workstream, we create /login and /logout pages and the profile-creation flow at a new route called /onboarding The onboarding flow is where we instantiate a user Team and assign it a unique Name. We also need /team and /team/{team_uuid} api endpoints This Team will be necessary for part 2, which is wallet creation flow.

Requirements

See Phase 1 - onboarding flow of discovery tree.

Use the discovery tree for requirements across four parts of the stack (NOTE: branches / tasks that are complete will have a green checkmark ✅)

Frontend
Database (looks to be completed)
Supabase Auth
API

Other Notes / Requirements

Non-logged in user can navigate and view the site, however, with this version ALL USERS must create a CM account to perform any transaction, including retire with a credit card or bank transfer

Sequence Diagrams

Two sequence diagrams are provided:

Supabase Auth

The designs for login and signup screens are styled on top of what is provided by Supabase Auth which we will leverage as much as possible.

Resources:

Supabase auth docs
Circle POC app that uses Supabase auth

Figma Designs

IMPORTANT NOTE: Designs of project and other pages are showing future state of CM UI v2 which is a workstream in progress. If the project pages are not updated to the new designs, the FE changes will need to be applied to existing implementation that is in production.

Notes:

desktop and mobile designs provided
The onboarding flow is shown from a project details page. This is a new user, with no CM account thus is not logged in. Note that on the project listing(s), need to show a LOGIN TO BUY OR RETIRE button CTA. In this flow, the user clicked the LOGIN TO BUY OR RETIRE button
The user may have also clicked on LOGIN OR SIGNUP CTA in the top navigation
Login screen...this is a page, not a modal
See notes above on use of Supabase auth
email/password and Google/Apple social login (OAuth) supported
Need to implement the Supabase auth Forgot password flow
User enters email and pw and clicks LOGIN or login with google or apple
User is returned to the project details page. On the listing, BUY and RETIRE button CTAs are now shown.
If the user had clicked LOGIN OR SIGNUP CTA in the top navigation, after signing in user is returned to the page they started from
Also see login screen designs here

Notes:

desktop and mobile designs provided
The onboarding flow is shown from a project details page. This is a new user, with no CM account thus is not logged in. Note that on the project listing(s), need to show a LOGIN TO BUY OR RETIRE button CTA. In this flow, the user clicked the LOGIN TO BUY OR RETIRE button
The user may have also clicked on LOGIN OR SIGNUP CTA in the top navigation
Login screen...this is a page, not a modal
See notes above on use of Supabase auth
In this flow, user then clicks Sign up
On the sign up page (not a modal), email/password and Google/Apple social login (OAuth) supported
If email/password selected, there is an email confirmation step with a Email verification sent message
Signup requires at a minimum creating a handle on the Complete profile screen
- User is returned to the project details page. On the listing, BUY and RETIRE button CTAs are now shown.
If the user had clicked LOGIN OR SIGNUP CTA in the top navigation, after signing in user is returned to the page they started from
Also see sign up screen designs here

Notes:

desktop and mobile designs provided
the first screen is shows what happens if a user did not complete the verification step during sign up and attempts to login to CM; not the Please verify your email and Don't see an email from us? messaging
if email or pw is incorrect, we show Invalid login credentials messaging
forgot pw flow also provided, starts after user clicks Forgot password link

KlimaDAO / klimadao