Add passwordless login

[NiallJoeMaher]

Context

• To allow users without a GitHub account to join, we should allow users to sign up with email
• The preferred method would be passwordless

Expected Behavior

• User can use their email to signup and login.
• A user that signs up will be required to add some basic data to their account before being able to create posts (the same data we get from GitHub).

Current Behavior

We only have GitHub login

[DarrachBarneveld]

Id love to try this. Been meaning to use passwordless for a good while now 👍

[JohnAllenTech]

What Auth provider should be used? Or will you roll your own basic auth? ( don’t recommend this)

[JohnAllenTech]

My recommendation https://supertokens.com

free for <5k MAU

[sleithdylan]

@JohnAllenTech Since we are already using Next Auth, I think we should stick with that and then for the email provider to send out the emails we should use something like SendGrid, MailChimp or AWS SES.

[NiallJoeMaher]

We have SES already working thankfully! I use it for sending Discord invites and reports.

[JohnAllenTech]

Looking into this at the minute. Dont want to ask for it yet until I am confident I have time to deliver. Are we okay with using the SMTP creds from SES? Doesnt seem to be an easy way to use the existing nodemailer transporter

https://next-auth.js.org/providers/email

[NiallJoeMaher]

@JohnAllenTech yes! That's what they are there for. If you can lock it behind the alpha env variable initially, that would be great because @John-Paul-Larkin is working on an onboarding flow, which will mean when we have a new user, they can set up their account, too. 🦾

[JohnAllenTech]

@NiallJoeMaher this is going a little too easy... The bones are there. Can you throw my name on this please

https://github.com/codu-code/codu/assets/46611809/fb4a7304-ba12-4db7-a183-b2a311d80431

This is pretty rough and its hardcoded to one email but its working 🚀

Some guidance needed

• Sign in email. Can we format this like the welcome email?
• Any guidance on how you would like the user to enter their email address to receive the sign in email?

[NiallJoeMaher]

Yes on the email! That's something we can clean up too so the simpler the better for the moment anyway.

For the input on this, we can hide it for now, because we will need the onboarding flow so the user can add their details.

But something like this if you want to get ahead of it and we can hide it behind a flag it for now:

[github-actions[bot]]

Uh oh! @NiallJoeMaher, the image you shared is missing helpful alt text. Check https://github.com/codu-code/codu/issues/612#issuecomment-1963481873.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

[JohnAllenTech]

@NiallJoeMaher the user can add their details with the current flow I demo'd? Is there more needed?

Sure the rest makes sense.

[NiallJoeMaher]

@JohnAllenTech - Ah yes it does! That's perfect. I just need to make sure the user actually hits "save" then. With GitHub we pull in the data first. I might be missing something here but I think this is good!

[John-Paul-Larkin]

We can redirect to the onboarding form instead? We will need to update this settings page to include the extra fields.

[NiallJoeMaher]

The onboarding form isn't finished yet! So the only option is what you currently have

[JohnAllenTech]

Any idea what these lines are called? They look like hyphens. I thought they were <hr> but dont seem to support the behaviour described

[github-actions[bot]]

Uh oh! @JohnAllenTech, the image you shared is missing helpful alt text. Check https://github.com/codu-code/codu/issues/612#issuecomment-1963739701.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

[JohnAllenTech]

@NiallJoeMaher how do you feel about this email template?

and heres where I have gotten to with login page

Still confused about the ---- ----- on either side of 'or continue with'

[github-actions[bot]]

Uh oh! @JohnAllenTech, the image you shared is missing helpful alt text. Check https://github.com/codu-code/codu/issues/612#issuecomment-1965239591.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

[JohnAllenTech]

This was completed in #785