NextAuth.js is not working with capacitor

[hmheng]

my app is implemeting nextauth.js for authentication, but there is error keeps throwing:
⚡️ [error] - [next-auth][error][client_fetch_error]
https://next-auth.js.org/errors#client_fetch_error session {"line":1,"column":12600,"sourceURL":"capacitor://localhost/_next/static/chunks/f802cd0b1d9c53dbc9bd7056b103f77275e700f5.a94e5bd1624ab5cfc796.js"}
⚡️ [error] - [next-auth][error][client_use_session_error]
https://next-auth.js.org/errors#client_use_session_error {}

Any idea how to implement this?

[gablabelle]

Hello @hmheng were you ever able to make Next-Auth work with capacitor ?

[alihuber]

I'm trying the same thing right now, on iOS 15.4 and capacitor 3.4.3. I seem to get some different errors:

⚡️  WebView loaded
⚡️  [error] - [next-auth][error][CLIENT_FETCH_ERROR] 
https://next-auth.js.org/errors#client_fetch_error The string did not match the expected pattern. {"error":{"message":"The string did not match the expected pattern.","stack":"json@[native code]\nl@capacitor://localhost/_next/static/chunks/pages/_app-6e945d8a04b6e3ba.js:1:368459\n@capacitor://localhost/_next/static/chunks/pages/_app-6e945d8a04b6e3ba.js:1:368244\nt@capacitor://localhost/_next/static/chunks/pages/_app-6e945d8a04b6e3ba.js:1:21396\nu@capacitor://localhost/_next/static/chunks/pages/_app-6e945d8a04b6e3ba.js:1:21608\npromiseReactionJob@[native code]","name":"SyntaxError"},"path":"session","message":"The string did not match the expected pattern."}
⚡️  [error] - [next-auth][error][CLIENT_SESSION_ERROR] 
https://next-auth.js.org/errors#client_session_error Beacons can only be sent over HTTP(S) {"message":"Beacons can only be sent over HTTP(S)","stack":"sendBeacon@[native code]\n@capacitor://localhost/_next/static/chunks/pages/_app-6e945d8a04b6e3ba.js:1:125374\nl@capacitor://localhost/_next/static/chunks/pages/_app-6e945d8a04b6e3ba.js:1:368459\n@capacitor://localhost/_next/static/chunks/pages/_app-6e945d8a04b6e3ba.js:1:368244\nt@capacitor://localhost/_next/static/chunks/pages/_app-6e945d8a04b6e3ba.js:1:21396\nc@capacitor://localhost/_next/static/chunks/pages/_app-6e945d8a04b6e3ba.js:1:21644\npromiseReactionJob@[native code]","name":"TypeError"}

All my URLs (NEXT_PUBLIC_FRONTEND_URL, NEXTAUTH_URL etc.) point to legitimate URLs reachable over https.

[gablabelle]

@alihuber add the value of your NEXTAUTH_URL in your capacitor.config.ts

...
server: {
    url: 'https://YOUR.DOMAIN.COM',
},

[gablabelle]

Then after logging in, I get redirect to the web app, not the IOS app... but this could be a configuration change I have to do to redirect URI.

[mlynch]

For mobile auth you need to use a custom url scheme as the auth redirect in many cases. So yourApp:///app/auth or whatever your custom url scheme and redirect handler is