Is there a way for next-auth to work inside electron js app? Because I heard that API Routes and specially dynamic API Routes don't work with electron app because in nextjs electron uses 'next export' for production build. I have created a project in next-js and using next-auth for authentication with Azure-AD provider (To login with microsoft accounts). The problem is that everything is fine in electron app when on development, but as soon as you create a production build, the dynamic routes don't get called. I tried to search for a solution but there isn't much discussion about this topic on the internet.
I am using nextron at the moment, but I am open to anything if there is any. The only restriction that I have is that the app should be 'nextjs'.
Is there a way for next-auth to work inside electron js app?
Yes, there's at least one way to get next-auth to work within an App that uses electron.js.
API Routes and specially dynamic API Routes don't work with electron app because in nextjs electron uses 'next export' for production build.
Not true. What you describe is the behavior specific to how Nextron's build works. Nextron's build command under the hood uses next export
in it's nextron-build.ts
script here which only exports the HTML, CSS, JS of your App's renderer
/ UI. It is useful for static websites or Single Page Apps (SPAs) but not for Apps that require a Node.js (or other) backend to serve or handle API routes like Auth.js (next-auth)'s Azure-AD auth provider that you are using.
Note: With Next.js v13.3.0+,
next export
is deprecated and is no longer needed for Next.js to output the compiled App. You can configurenext build
to generate the output in theout
directory usingoutput: 'export'
in yournext.config.js
like below:const nextConfig = { output: 'export', } module.exports = nextConfig
To use Next.js UI + API routes with Electron, instead of using Nextron (which limits your App to static export), you can use electron-builder
directly and setup the build
config in your package.json
. A minimal example of the changes needed in your package.json
is provided below:
...
"scripts": {
"dev": "npm run build && electron .",
"build-renderer": "next build renderer",
"build": "npm run build-renderer",
"dist": "npm run build && electron-builder",
},
"devDependencies": {
...
"electron": "^13",
"electron-builder": "^23.0.3",
},
"build": {
"asar": true,
"files": [
"main",
"renderer/out"
]
}
...
With the above, for a production build, you would run: npm run dist
.
If you want to further customize your production build, you can create a builder.config.js
and update the "build"
object in your package.json
to be "build": "builder.config.js"
.
If you want to start from scratch with a template, you can use this minimal next.js example like this: npx create-next-app --example with-electron YOUR_APP_NAME
If you want a complete example for your reference to upgrade your existing App, here's a code repo for a cross-platform Electron.js + Next.js App with API, dynamic routes and Next-Auth (Auth.js) integration.