A way to sign in to Popscle (draft)

[malikpiara]

Context

There are a lot of question marks when it comes to how to approach our product development. Should we start with spaces for specific learning topics? Or should we start by enabling curators to create their own lists or pages?

We're still figuring these questions out. With that in mind, authentication is an essential part of any modern product today. We need authentication regardless of the path we take, so let's start there.

Investment

We shouldn't spend a lot of time optimising our authentication when we're still unsure about how the product is going to be used. Since we're building the product from scratch and this is the first time @adonisote is using Next.js and Supabase, I believe it makes sense to invest 1 to 2 weeks designing and implementing a solution.

Proposed Solution

Let's implement a login screen that lets existing users sign-in. Users should be able to sign in with their Github account or with their email address via magic link.

When using the email address option, users should receive an email notification with a link to sign in. We're using magic link because I believe this implementation should facilitate the one that is required for inviting users to join Popscle via email later on.

The route that I propose for the sign in flow is the following:

/login

When users sign in successfully, they should be redirected to:

/hello

• [x] Users who are signed in should also be redirected to /hello when they try to visit login again.
• [x] When users are signed in, they should be able to visit /hello and see "Hello email@example.com".
• [x] When they're not logged in, they should see another message that is rendered conditionally OR be redirected to the sign in page.

Here's a rough idea of what the screen could look like on desktop:

Out of Scope

1. We don't need to implement a sign up page. Since the product is going to be released to a closed group of users, we can send invites via the Supabase interface.
2. We're not implementing other auth providers like Google or LinkedIn. Our user onboarding flow will be improved over the time and we'll revisit it when we have a product that is creating value and have actual users engaging with our product.
3. We're not worried about the email templates next our our integration with loops.so. That will come afterwards.

Things that can go wrong

1. Some people might try to sign in even though they don't have an account yet. We can display a message when users attempt to login and their email is not found on our database.
2. We need to test the magic link functionality properly. Sometimes things go wrong and authentication

[malikpiara]

"Local storage" doesn't exist on the server side. This is something we should have in mind when implementing sign in with a magic link.

[adonisote]

https://ui.shadcn.com/examples/authentication

Just as guide