Login with magic code #1818

Soxasora · 2025-01-14T10:07:10Z

Description

Partially fixes #727
Introduces a 6-character bech32 magic code (token) that expires in 5 minutes and can be used to login with email on PWA, especially iOS since atm there's no way to open a PWA from a link.

On signIn, the email and the callbackUrl will be temporarily saved on sessionStorage

Upon submitting the magic code, it will build and redirect to a magic link (as we are used to) with the user inserted token and email, callbackUrl from sessionStorage

After 3 failed attempts, a custom useVerificationToken will delete email and token from the database, requiring the user to get a new one.

Introduces MultiInput, a customizable component that allows for n inputs and supports keyboard traveling, can prepend a sequence (1-input, 2-input, etc.)

Screenshots

code input page:

invalid magic code:

if no callback url or email

email template:

error page:

Additional Context

afaik in this version of NextAuth we can't send parameters from signIn to /verify-request to /email without risking to be disruptive, thus I had to resort to sessionStorage

Also we can't send the default token AND the new custom token

Changed from 'login as [email protected]' to 'login with [email protected]' to make it independent from context (if login or setting an email); removed any reference to links

InputInner component has been modified to check for hideError, if true error messages will be showed by MultiInput instead of InputInner

Checklist

Are your changes backwards compatible? Please answer below:
Changes token generation

On a scale of 1-10 how well and how have you QA'd this change and any features it might affect? Please answer below:
7: login, signup, link email, emails
7: token invalidation occurs on success and on 4th failed attempt

For frontend changes: Tested on mobile, light and dark mode? Please answer below:
Yes

Did you introduce any new environment variables? If so, call them out explicitly here:
No

Progress

Removed checkboxes, was lagging too much

fix flex rules
disable magic code input if callback is not available
magic code input via MultiInput
- change layout method, inputs are too big on desktop
- fix mobile layout
- cleanup
- comments
- single error message instead of per input
- autofocus
magic code for non-PWA users
check if we can avoid sessionStorage
better token invalidation tests
avoid isPWA duplicate (pull-to-refresh.js; email.js)
expire token/session after 3 failed tries
use bech32 as generator
Auth, revise token generation
UX, better email
UX, adjust remaining email templates
cleanup

Soxasora · 2025-01-14T20:27:35Z

We could also enable magic code for non-PWA users, imho it would be handy, token is 6-digits anyway and you can still click the link

ekzyis

Turns out I didn't submit this review two days ago 👀

I didn't test yet, only looked at the code. Left some questions.

We could also enable magic code for non-PWA users, imho it would be handy, token is 6-digits anyway and you can still click the link

I think this is the way to go. Less complexity in our code, less confusing for users and would allow to use emails on mobile to login on desktop and vice versa.

ekzyis · 2025-01-18T15:48:14Z

components/pull-to-refresh.js

-
-  useEffect(checkPWA, [])
+  useEffect(() => {
+    typeof window !== 'undefined' && setIsPWA(checkPWA(window))


Do you need to check typeof window !== undefined? Do effects not always run on the client?

That's what I thought and still believe, I had to include typeof window !== undefined because it seems that the code is being ran before client exposes window or on server while compiling. I might be saying some big bullshit here but that was the error I was getting.

pages/api/auth/[...nextauth].js

ekzyis · 2025-01-18T16:26:10Z

pages/api/auth/[...nextauth].js

+function randomizeToken () {
+  const words = bech32.toWords(Buffer.from(randomBytes(3)))
+  return bech32.encode('token', words).slice(6, 12)
+}


I need to think more if 24 bits is strong enough even if the link is only valid for 5 mins. Need to do some research how other services deal with the low entropy 🤔

Using bech32 encoding to go from random bytes to guaranteed alphanumeric characters is also an interesting choice. I think I know why you decided to use bech32 but can you elaborate?

This is more a product of better safe than sorry. Discussing with @huumn we agreed that bech32 encoding would produce a safer token than a standard 6-digit or even an 8-digit one.

The real reason is the resulting entropy, there are 32 possible characters per every 'digit', 32^6 = 1.073.741.824 (auto calc came in clutch lol).
24-bit or 32-bit entropy will result anyway in 32^6 after slicing!¹

Edit:

go from random bytes to guaranteed alphanumeric characters

I realized I didn't address this, it's just one way to randomize the starting seed, we could choose whatever in place of that

Footnotes

if I'm not mistaken ↩

Soxasora · 2025-01-22T15:04:08Z

explore better magic code input

Redrafting to give this full priority to 'complete' the PR as everything else is ready for review

Soxasora · 2025-01-29T15:00:34Z

pages/auth/error.js

@@ -27,8 +27,8 @@ export default function AuthError ({ error }) {
    return (
      <StaticLayout>
        <Image className='rounded-1 shadow-sm' width='500' height='375' src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/double.gif`} fluid />
-        <h2 className='pt-4'>This magic link has expired.</h2>
-        <h4 className='text-muted pt-2'>Get another by logging in.</h4>
+        <h2 className='pt-4'>Where did the magic go?</h2>


this is a placeholder for eventual stackernews-themed sentences 👀

huumn

I'll QA and stuff first thing tomorrow, but we'll want to change the usage of the bech32 lib.

huumn · 2025-01-30T02:06:47Z

pages/api/auth/[...nextauth].js

@@ -366,9 +403,15 @@ export default async (req, res) => {
  await NextAuth(req, res, getAuthOptions(req, res))
 }

+function randomizeToken () {
+  const words = bech32.toWords(Buffer.from(randomBytes(3)))
+  return bech32.encode('token', words).slice(6, 12)


I don't think we want to use the bech32 encoding lib:

I don't understand it

it has features that we don't need like prefix and checksum

I suggested bech32 for the alphanumeric character set because in lower case, none of the characters can be confused for other numbers/letters. For upper case, there might be a better character set, but basically we want something like the following to generate the string (we have no need for a checksum):

function generateRandomString(length = 6, charset) { // Default charset if none provided charset = charset || 'qpzry9x8gf2tvdw0s3jn54khce6mua7l'; const bytes = crypto.randomBytes(length); let result = ''; // Map each byte to a character in the charset for (let i = 0; i < length; i++) { result += charset[bytes[i] % charset.length]; } return result; }

Okay! I juggled around the bech32 library because we were already using it (appropriately) for other stuff. I'll gladly switch to manual generation and avoid shenanigans.
Didn't know about avoiding confusion with uppercase characters but I see it now, switching asap!

FYI Probably not going to get to QA until later today. Troubleshooting weird lightning stuff.

I didn't get to it at all today - add to #1853 that the lnd cert expired, paginated comments deployment caused a meltdown and had weird ux issues.

The fixes you made look good though. I'll QA first thing tomorrow hopefully.

A signal from the universe that paginated comments are 🔥🔥🔥, jokes aside don't worry, this PR ain't going somewhere else while we sleep ^^

Soxasora · 2025-01-30T06:57:46Z

pages/api/auth/[...nextauth].js

+function generateRandomString (length = 6, charset = BECH32_CHARSET) {
+  const bytes = randomBytes(length)
+  const result = new Array(length)
+
+  // Map each byte to a character in the charset
+  for (let i = 0; i < length; i++) {
+    result[i] = charset[bytes[i] % charset.length]
+  }
+
+  return result.join('')
 }


Just added the bech32 charset to constants, made it default and switched to array building instead of string concatenation (it would allocate a string per addition, actually not a problem with 6 characters but it's better to be safe than sorry)

The result is this:

edit: my opinion on array join vs string concatenation is something that I learnt but I might be wrong, the performance change is impossible to perceive anyway!
I'll test performance asap

Okay I was wrong, string concatenation in this use case is 0.17% faster, this edit is basically useless... reverting

huumn

I haven't done a line by line review yet but this works well in my QA so far.

Is it intentional that the code must be typed manually? The email says "copy it" but each input only takes one character so I can't copy then paste. I have to manually input each character.

Also it might be nice if the input autofocused to assist copy and pasting.

I'll continue QAing and let you know if anything else comes up

Soxasora · 2025-01-31T20:16:59Z

Is it intentional that the code must be typed manually?

Oh, didn't think about it! I'm going to push it right now.

Also it might be nice if the input autofocused to assist copy and pasting.

That's a bug, autofocus works on desktop hmm... on it, thanks k00b!
edit: autofocus might not be permitted on iOS, weird since a native app can with webview

huumn · 2025-02-01T01:04:57Z

Copy/paste works now and it QAs great.

I'll do a line-by-line and finer UI/UX crit tomorrow, but unless there's something too big for me to change easily, you can probably consider this done.

Nice work! 🎆

huumn · 2025-02-04T00:29:05Z

pages/api/auth/[...nextauth].js

        },
        orderBy: {
          createdAt: 'desc'
        }
      })

-      if (!verificationRequest) return null


This forces a redirect to the login page (my change that is) if all 3 attempts have been tried which lets us avoid a the "go back or login again" on the error page. Instead, the button on the error page just goes back in the browser history.

This is a way better UX, thanks!

huumn · 2025-02-04T00:37:38Z

pages/api/auth/[...nextauth].js

+      await prisma.verificationToken.update({
+        where: { id: verificationRequest.id },
+        data: { attempts: { increment: 1 } }
+      })


Your changes were perfectly fine, but the increment wasn't an atomic read-write; it read from the db in one tx, then updated it in another. While it's still possible with my fixes for someone to get more than 3 attempts in quick succession, this makes it a little less likely.

Ideally, this code would not have any races at all, but it's a bit tricky because identifier isn't unique. We could wrap it all in a transaction and do an optimistic lock, or make it seriallizable, but our attempt limit is so low they won't get many more attempts anyway.

huumn · 2025-02-04T00:40:56Z

Great work! Couldn't fault except for relative nitpicks.

Sebastix · 2025-02-04T07:26:48Z

Woa, this is very neat!! Nice solution for fixing the loggin in with the PWA 👍🏻

Soxasora added bug auth labels Jan 14, 2025

Soxasora force-pushed the magic_login branch 2 times, most recently from 62e4f47 to 6954342 Compare January 14, 2025 14:14

Soxasora marked this pull request as ready for review January 14, 2025 19:27

Soxasora marked this pull request as draft January 14, 2025 22:46

Soxasora force-pushed the magic_login branch 2 times, most recently from 3930597 to 19296ab Compare January 16, 2025 12:56

Soxasora changed the title ~~fix: cannot login with email on PWA~~ Login with magic code Jan 16, 2025

Soxasora marked this pull request as ready for review January 16, 2025 13:32

ekzyis self-requested a review January 18, 2025 15:46

ekzyis reviewed Jan 20, 2025

View reviewed changes

Soxasora marked this pull request as draft January 20, 2025 20:28

Soxasora marked this pull request as ready for review January 22, 2025 14:58

Soxasora marked this pull request as draft January 22, 2025 15:03

Soxasora force-pushed the magic_login branch from f452a36 to 00acd11 Compare January 28, 2025 11:11

Soxasora marked this pull request as ready for review January 28, 2025 12:54

Soxasora marked this pull request as draft January 28, 2025 22:10

Soxasora force-pushed the magic_login branch from cff54d0 to 02501db Compare January 29, 2025 09:52

Soxasora added 9 commits January 29, 2025 10:58

fix: cannot login with email on PWA

2abe1cb

adjust other email templates

e130705

restore manual url on new user email

cfc01c5

no padding on button section

c357bc7

cleanup

2f29f30

generate 6-digit bechh32 token

33bbdc3

token needs to be fed as lower case; validator case insensitive

8fb7cdb

delete token if user has failed 3 times

7a0e794

proposal: context-independent error page

3efa20d

Soxasora added 5 commits January 29, 2025 10:58

final cleanup: remove unused function

5c26cd6

compact useVerificationToken

0b6da66

email.js: magic code for non-PWA users

2ad5d04

adjust email templates

6155eef

MultiInput component; magic code via MultiInput

9658807

Soxasora force-pushed the magic_login branch from 02501db to 9658807 Compare January 29, 2025 09:58

Merge branch 'master' into magic_login

a8b8102

Soxasora marked this pull request as ready for review January 29, 2025 10:06

hotfix: revert length testing; larger width for inputs

5c7e17f

Soxasora force-pushed the magic_login branch from 8e85606 to 5c7e17f Compare January 29, 2025 10:40

Soxasora commented Jan 29, 2025

View reviewed changes

Merge branch 'master' into magic_login

33a9d47

huumn requested changes Jan 30, 2025

View reviewed changes

manual bech32 token generation; no upperCase

908b70e

Soxasora commented Jan 30, 2025

View reviewed changes

Soxasora and others added 3 commits January 30, 2025 09:43

reverting to string concatenation

4fa221b

layout tweaks, fix error placement

766ca22

Merge branch 'master' into magic_login

b0b8a38

huumn reviewed Jan 31, 2025

View reviewed changes

pastable inputs

390f79b

huumn and others added 3 commits February 2, 2025 14:56

Merge branch 'master' into magic_login

8085a71

small nit fixes

dd2e75c

less ambiguous error path

6527e22

huumn reviewed Feb 4, 2025

View reviewed changes

huumn merged commit be7c702 into stackernews:master Feb 4, 2025
6 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Login with magic code #1818

Login with magic code #1818

Soxasora commented Jan 14, 2025 •

edited

Loading

Soxasora commented Jan 14, 2025 •

edited

Loading

ekzyis left a comment

ekzyis Jan 18, 2025

Soxasora Jan 20, 2025 •

edited

Loading

ekzyis Jan 18, 2025

Soxasora Jan 20, 2025 •

edited

Loading

Soxasora commented Jan 22, 2025

Soxasora Jan 29, 2025

huumn left a comment

huumn Jan 30, 2025 •

edited

Loading

Soxasora Jan 30, 2025 •

edited

Loading

huumn Jan 30, 2025

huumn Jan 31, 2025

Soxasora Jan 31, 2025 •

edited

Loading

Soxasora Jan 30, 2025 •

edited

Loading

huumn left a comment •

edited

Loading

Soxasora commented Jan 31, 2025 •

edited

Loading

huumn commented Feb 1, 2025

huumn Feb 4, 2025 •

edited

Loading

Soxasora Feb 4, 2025

huumn Feb 4, 2025

huumn commented Feb 4, 2025

Sebastix commented Feb 4, 2025

Login with magic code #1818

Login with magic code #1818

Conversation

Soxasora commented Jan 14, 2025 • edited Loading

Description

Screenshots

Additional Context

Checklist

Progress

Soxasora commented Jan 14, 2025 • edited Loading

ekzyis left a comment

Choose a reason for hiding this comment

ekzyis Jan 18, 2025

Choose a reason for hiding this comment

Soxasora Jan 20, 2025 • edited Loading

Choose a reason for hiding this comment

ekzyis Jan 18, 2025

Choose a reason for hiding this comment

Soxasora Jan 20, 2025 • edited Loading

Choose a reason for hiding this comment

Footnotes

Soxasora commented Jan 22, 2025

Soxasora Jan 29, 2025

Choose a reason for hiding this comment

huumn left a comment

Choose a reason for hiding this comment

huumn Jan 30, 2025 • edited Loading

Choose a reason for hiding this comment

Soxasora Jan 30, 2025 • edited Loading

Choose a reason for hiding this comment

huumn Jan 30, 2025

Choose a reason for hiding this comment

huumn Jan 31, 2025

Choose a reason for hiding this comment

Soxasora Jan 31, 2025 • edited Loading

Choose a reason for hiding this comment

Soxasora Jan 30, 2025 • edited Loading

Choose a reason for hiding this comment

huumn left a comment • edited Loading

Choose a reason for hiding this comment

Soxasora commented Jan 31, 2025 • edited Loading

huumn commented Feb 1, 2025

huumn Feb 4, 2025 • edited Loading

Choose a reason for hiding this comment

Soxasora Feb 4, 2025

Choose a reason for hiding this comment

huumn Feb 4, 2025

Choose a reason for hiding this comment

huumn commented Feb 4, 2025

Sebastix commented Feb 4, 2025

Soxasora commented Jan 14, 2025 •

edited

Loading

Soxasora commented Jan 14, 2025 •

edited

Loading

Soxasora Jan 20, 2025 •

edited

Loading

Soxasora Jan 20, 2025 •

edited

Loading

huumn Jan 30, 2025 •

edited

Loading

Soxasora Jan 30, 2025 •

edited

Loading

Soxasora Jan 31, 2025 •

edited

Loading

Soxasora Jan 30, 2025 •

edited

Loading

huumn left a comment •

edited

Loading

Soxasora commented Jan 31, 2025 •

edited

Loading

huumn Feb 4, 2025 •

edited

Loading