How to make Next Auth work with Capacitor
Before you start
This is an example of a production use. It doesn't work straight out of the box on localhost
, as the application that runs on on Vercel doesn't allow requests from localhost
. (See #4)
This is an example of how would you authenticate user from your built Android application against a Next.js application running on a distant server.
What is this?
If you have a Next.js application, you may know you can run it natively on Android or iOS using Capacitor.
Next Auth however doesn't work straight out the box. This repository shows that you can use some workarounds to make it work.
Basic Capacitor knowledge required.
Tips
- Use
chrome://inspect/#devices
to inspect the webview of your application. You can inspect cookies of your app this way. - Don't know much about Capacitor? Read this https://devdactic.com/nextjs-and-capacitor
Caveats
iOS and the forbidden usage of https scheme
iOS as a system doesn't allow the usage of https
scheme, which is something we rely on in this repository, as we want our application to have a hostname with the https
scheme
Read more at: https://forum.ionicframework.com/t/https-for-the-app-server-protocol-instead-of-capacitor-on-ios/200116/2
What you need to do:
1. Change capacitor.config.ts to:
server: {
hostname: `mob.next-auth-capacitor.vercel.app`, // We need to change hostname to subdomain of our domain the API is hosted on
androidScheme: "https", // HTTPS should be set preferably
},
We need to set hostname and androidScheme to https
so we can share our cookies with our application (domain - subdomain cookies sharing).
2. Change Next API config (headers) to enable CORS
You must change mainly these keys: Access-Control-Allow-Credentials
and Access-Control-Allow-Origin
so the application can connect to the server.
async headers() {
return [
{
source: "/:path*",
headers: [
{ key: "Access-Control-Allow-Credentials", value: "true" },
{
key: "Access-Control-Allow-Origin",
value: "https://mob.next-auth-capacitor.vercel.app",
},
{
key: "Access-Control-Allow-Methods",
value: "GET,OPTIONS,PATCH,DELETE,POST,PUT",
},
{
key: "Access-Control-Allow-Headers",
value:
"X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version",
},
],
},
];
},
3. Create own OAuth flow
See utils/helper.ts
4. Create own UseSession provider
See utils/session.tsx
_app.tsx
SessionProvider to provider you just created
5. Change See pages/_app.tsx
6. Modify Next Auth config
See pages/api/auth/[...nextauth].ts
Based on a discussion: nextauthjs/next-auth#4446 Thanks to @creativiii