search

humblFINANCE / humblFINANCE-frontend

the official codebase for the humblFINANCE web app
https://humbl-finance-frontend.vercel.app
Other
0 stars 0 forks source link

[FEAT]: 🎉 NEW 🎉 User Authentication Flow #24

Closed jjfantini closed 2 weeks ago

jjfantini commented 1 month ago

Forget everything that we had worked on in the last development iteration. I have decided on a new user authenticaiton flow, one that is much easeier, and won't rely on a database. This will speed up the authentication process, so users aren't waiting for a DB call to check if they are in the DB.

Main Goal:

Users are now going to be anonymously authenticated. This flow creates 3 different types of users:

Image

The authenicated users (both anonymous & permanent) will have access to the (private)/dashboard route. Authenticated anonymous users will have restricted features on the dashboard, like not being able to save a custom list of tickers in their portfolio. The goal of having authenticated anonymous users is to let them see the internals of the dahboard and get the most basic features without any customization. Authenicated permanent users will be able to interact with the dashboard as a BASIC user (not subscribed to plan)...details to follow.

Authentication Flow:

  1. Unauthenticated User Accesses the /landing-page root.
  2. Unauthenticated User can click on the Dashboard button in the top header. #25
  3. The Dashboard button triggers the supabase.auth.signInAnonymously() function.
  4. The Authenitcated Anonymous User can explore the dashboard and see a static portfolio lost of tickers with their analysis and some market insights.
  5. If the Authenticated Anonymous User wants to add a ticker to their portfolio, make an alert or search a specific ticker symbol and the analysis, prompt the user to sign-up and make a permanent account with the LoginModal (look at #25 for more information on Dashboard button functionality and LoginModal). The user can also sign-up with a Sign Up button in the header (only present when the user is anonymous)
  6. Depending on the trigger, the user is then prompted to sign-up/login. The sign-up page will allow the user to either sign-up with an email or an OAuth provider**. Now, the user profile is updated and the anonymous user is made permanent. You can do this with supabase.auth.updateUser or supabase.auth.linkIdentity to use an OAuth Provider and link the user to their account and email.

There should still be login support for passwordless methods (magic-link/OTP). THe emails entered to retireve these codes will be linked to a permanent user.

**There are compnents from the login/page.tsx that have been created that can be re-used.

OAuth Providers:

Notes

When you use a social provider to login, you should also extract the meta data (username, full_name, avatar_url, email) to populate the Profile of the user on humblFINANCE. To greet the user using their full name and populate the fields that the user can edit.

References

Here are some resources to use when you are implementing user authentication flow anonymously. Supabase Supports Anonymous Sign-In Anonymous Sign-In Documentation Linking Identity with E-Mail/OAuth Docs

jjfantini commented 1 month ago

Resources

Here are some resources to use when you are implementing user authentication flow anonymously. Supabase Supports Anonymous Sign-In Anonymous Sign-In Documentation Linking Identity with E-Mail/OAuth Docs

jjfantini commented 2 weeks ago

Closed with #41 and #47