[FEAT]: `LandingPageNavBar.tsx` header & `LoginModal` component

[jjfantini]

Main Goal

On the /(landing-page)/layout.tsx, there is a component LandingPageNavBar. This navigation bar currently has two buttons (found at line 94); a Login button and Get Started button. Given the new user authentication flow to allow anonymous users, this should be changed. There should only be one Dashboard button. When a user clicks this button, it should trigger a modal popup. This will offer three options.

1. a button to continue anonymously. ==> creaes an anon user to be linked to permanent user later
2. a sign in field, user enters their email and is sent a OTP ==> if th emial is not registered, it will createUser
3. social provider sign in ==> user is signed up if not already verified.

The user must then first complete an hcaptcha to verify they are human before logging in anonymously. They will be logged in with auth.SignInAnonymously(). This will take the authenticated anonymous user to the /(private)/dashboard/ route. If the user is a permanent user, then clicking this Dashboard button, they can login with their email/social provider.

Tasks

1. • [ ] replace Login & Get Started with Dashboard button
2. • [ ] transform login/page.tsx to LoginModal component to get shown when Dashboard is clicked. It should look something like the image below (Reference 1)... p.s ask for the code, I have NextUI Pro component ready to go that looks similar.
3. • [ ] implement anonymous/OTP/OAuth login options in the LoginModal (should be quick as logic has already been made)

Notes

Here is a summary of the logic that needs to be embedded in the LoginModal.

Actions for Email Authentication:

1. Authenticated and Anonymous User:

   • Action when clicking Login:
     • Use supabase.auth.updateUser to link the email with their existing anonymous user_id.
     • If the user has already been authenticated anaonymously and they want to create an account / login with their email (to convert them to a permanent user)

2. Unauthenticated User:

   • Action when clicking Login:
     • Use supabase.auth.signInWithOtp to authenticate the user with the provided email.
     • Use supabase.auth.signInWithPassword to authenticate if using an email & password and not using an email OTP

Actions for Social Sign-ins:

1. Authenticated and Anonymous User:

   • Action when clicking on a social sign-in button:
     • Use supabase.auth.linkIdentity to link the social account with the existing anonymous user_id.

2. Unauthenticated User:

   • Action when clicking on a social sign-in button:
     • Use supabase.auth.signInWithOauth to authenticate the user using their social account.

References

Reference 1:

[jjfantini]

Closed with #41