nextauthjs / nextauthjs/next-auth

Enable `redirectTo` to work with non-ASCII characters

Open
#12,499 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug triage
Dominant language
TypeScript
Stars
28.4k
Forks
4k
PR merge metrics
No merged PRs in 30d

Description

Environment
  System:
    OS: macOS 14.5
    CPU: (12) arm64 Apple M3 Pro
    Memory: 68.23 MB / 18.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.0 - /usr/local/bin/node
    Yarn: 1.22.21 - /opt/homebrew/bin/yarn
    npm: 10.2.4 - /usr/local/bin/npm
    pnpm: 9.10.0 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 131.0.6778.265
    Safari: 17.5
  npmPackages:
    @auth/qwik: 0.5.4 => 0.5.4 
    @builder.io/qwik: ^1.12.0 => 1.12.0 
    @builder.io/qwik-city: ^1.12.0 => 1.12.0 
Reproduction URL

https://github.com/jakovljevic-mladen/auth-issue

Describe the issue

I use Qwik (@auth/qwik) package and I have something like this in my code:

export default component$(() => {
  const signIn = useSignIn();
  ...
  return <>
    ...
    <button onClick$={() => {
            signIn.submit({ providerId: 'github', redirectTo: encodeURI('/završi-profil') });
          }} />
    ...
   </>;
});

Where redirectTo has value '/zavr%C5%A1i-profil'. Please notice that this value is already encoded with encodeURI() and that the decoded value is '/završi-profil' (please notice letter š which is non-ASCII character). završi-profil is in Serbian and it means: Finish profile.

When I do the login, I get redirected to /auth/error?error=Configuration because I get an error with this stack trace:

[auth][error] TypeError: Cannot convert argument to a ByteString because the character at index 26 has a value of 353 which is greater than 255.
    at webidl.converters.ByteString (node:internal/deps/undici/undici:1834:17)
    at _Headers.set (node:internal/deps/undici/undici:2164:35)
    at toResponse (file:///auth-issue/node_modules/@auth/core/lib/utils/web.js:71:26)
    at Module.Auth (file:///auth-issue/node_modules/@auth/core/index.js:114:26)
    at async onRequest (/auth-issue/node_modules/@auth/qwik/index.qwik.js:357:29)
    at async Object.next (file:///auth-issue/node_modules/@builder.io/qwik-city/lib/vite/index.mjs:25314:9)
    at async runNext (file:///auth-issue/node_modules/@builder.io/qwik-city/lib/vite/index.mjs:25220:5)
    at async file:///auth-issue/node_modules/@builder.io/qwik-city/lib/vite/index.mjs:26465:26
How to reproduce

To reproduce this error, please checkout the GitHub repository from reproduction URL, install dependencies and create .env file in the root folder (next to package.json file).

Please add (and edit) these values in .env file:

AUTH_SECRET="IaVaabR2TwImBNJ"
GITHUB_ID="add your own GH ID here"
GITHUB_SECRET="add your own GH secret here"

Please make sure to edit GITHUB_* values by adding your own testing ID and secret that can work with localhost URI.

Run npm run dev (or anything you may be using instead of npm) in console and open http://localhost:5173/ in your browser.

Open Network tab, then click Sign in with GitHub button.

image

In the network tab, please notice the value being sent in authjs.callback-url cookie when auth/callback/github request is sent:

image
Expected behavior

Expected behavior is that user is logged in and redirected to /završi-profil URL.

Since redirectTo value is properly encoded, I don't know why it was decoded when it was passed to headers.set here. Even if it was decoded previously, I suppose that it should be wrapped with encodeURI once again:

if (res.redirect) response.headers.set("Location", encodeURI(res.redirect))

Is it possible to do that?

p.s.
Related: https://github.com/nextauthjs/next-auth/issues/12498

p.p.s.
Login works as expected if you do this here:

signIn.submit({ providerId: 'github', redirectTo: encodeURI('/zavrsi-profil') }); // please notice that character ž is omitted

p.p.p.s.
Even though I use Qwik, this doesn't seem to be related to Qwik package, but rather to core package, therefore, I didn't put [Qwik] in the title.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in packages/core/src/lib/utils/web.ts at the response header handling linked in the issue, and compare it with the reproduction using the encoded /završi-profil redirect. Run the linked reproduction repository with npm run dev and configured GitHub credentials; done means login succeeds and redirects to /završi-profil without the ByteString error.

Written by the indexing model from the issue text.

Assessment

Tech stack
node.js, typescript
Domain
authentication, backend-api-design
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.