Impossible to load external Auth0 in the built app

[bm777]

Hi @saltyshiomix, I have built a desktop app with

• Nextron 8.2
• Electron 20.1
• next 12.2.5
• react 18.2

I have integrated authentication with auth0 auth0/nextjs-auth0@2.5.0, and it works very well in dev mode (npm run dev) on MacOS M2, Linux 64bit arch, and Windows 64bit arch too.

Followed this auth0-nextjs-guide which works very well with Nextron in dev mode.

When I generate the executable (.dmg, exe, etc.) it doesn't render the authentication page. it stays on the default page returned by the main/background.js. -> main.js

1. background.js

   
   import { app } from 'electron';
   import serve from 'electron-serve';
   import { createWindow } from './helpers';

const isProd = process.env.NODE_ENV === 'production';

if (isProd) { serve({ directory: 'app' }); } else { app.setPath('userData', ${app.getPath('userData')} (development)); }

(async () => { await app.whenReady(); const mainWindow = createWindow('main', { width: 1400, height: 800, minWidth: 1400, minHeight: 800 });

if (isProd) { await mainWindow.loadURL('app://./main.html'); } else { const port = process.argv[2]; await mainWindow.loadURL(http://localhost:${port}/main); } })();

app.on('window-all-closed', (e) => { // app.quit(); e.preventDefault() });

2. main.js
```js
import { withPageAuthRequired } from "@auth0/nextjs-auth0/client";
import { useEffect, useState } from "react";

export default withPageAuthRequired(function Deepfile({user}) {
  // useStates

  // handlers

  useEffect(() => {
    document.title = "DeepFile"
  }, [])

  // return dashboard
  if(user) return (
    <div className={"h-screen w-screen flex justify-center transform duration-[1600ms] "}>
        <p>Main page</p>
    </div>
  )

  // Otherwise return to DeepFile login screen
  return (
    <div className="border">Heellllo</div>
  )
})

---

Reproduce the issue

npm run build:all

I also tried to run it for Mac only it has the same behavior

npm run build:mac

I got where the issue come from it is because of withPageAuthRequired in the main.js, when I remove it, the built app work well. This is the render without withPageAuthRequired.

How can I make Nextron accept the authentication in the built app?

[saltyshiomix]

@bm777

I have one question:

Do you use API routes inside nextron renderer process? If so, Electron in production mode can't handle callback URL because Electron can handle only static files, sorry for inconvenience.

[bm777]

@saltyshiomix

True. It is the case.

Maybe the workaround could be Machine2Machine communication.

I.e. using authentication in the frontend that I must build

[saltyshiomix]

@bm777

Thank you quick response!

It may be helpful by using Deep Links:

https://stackoverflow.com/a/53603876

I think it is possible to change callback URL to deep link to open the app :)

Could you try it?

[bm777]

@saltyshiomix

Me, I'm thanking for your quick help :)

I'm going to try it this night.

[saltyshiomix]

@bm777

I just added basic-launch-app-from-url example! https://github.com/saltyshiomix/nextron/tree/main/examples/basic-launch-app-from-url

Please try it and let me know how is it going :)

[bm777]

@saltyshiomix

It opens the app and still gets stuck on the same page, it doesn't go to authenticate the page with withPageAuthRequired.

In dev, when I click on the Access button, it pushes to the main.js page which is protected by withPageAuthRequired and it does it well.

In prod, when I click on Access, it stuck on the same page, it executes my handler function but doesn't go to main.js(Unless I remove withPageAuthRequired)

https://github.com/saltyshiomix/nextron/assets/29865600/d952b17a-c78d-4386-a95b-90ff2a84bed5

---

But I tried to use the Next.js approach to authenticate with auth0, how about trying to authenticate with electron approach? (token based)

[saltyshiomix]

@bm777

Thank you for trying it!

I am not sure how it should be done, but one idea I have is to embed the value (token or any other values) in the protocol and pass them to main process.

We can decide both protocol area and uri area: protocol://uri like:

• deepfile-fiddle://open (current)
• deepfile://auth?token=jwt (I believe we can get this URL in main process)

[saltyshiomix]

@bm777

I just updated basic-launch-app-from-url example, so please check it out if you have time :)

[bm777]

@saltyshiomix

Thank you for being so helpful. I'm already checking it.

I think deepfile://auth?token=jwt could be the fastest way since authentication is not the app's main feature 😉

[bm777]

@saltyshiomix

Thank you very much for the integration. It works very well.

I think using an email and password (token-based auth) is the fastest way for me to finish the app. I'm avoiding Google+Apple+Microsoft auth. If the users complain, I will come back to it later 😉.

After the beta, I will integrate the beta Google Drive connection (So the user can search on their online drive)

---

This is the Email + Password auth I just wrote.

What do you think?

[saltyshiomix]

@bm777

It's pretty cool! Are you developing a full-text search engine? (with online drive)

And also, a way to establish user authentication for third party providers in a desktop app would be good knowledge for everyone.

I hope the implementation of the application goes well!

[bm777]

@saltyshiomix

Thanks.

I'm developing a semantic search engine app. That searches in every document (pdf, docs, txt) in the

local drive (beta) online drive (after beta) Yes, I think the authentication will be a good knowledge to share.

But, DeepFile, the product will be private, but I can ship the authentication code to everyone (With good guidance.)

Can I ask a quick question, will you also consider writing documentation for Nextron? We can share many useful tutorials there and other next.js developers could be interested in Nextron.

[saltyshiomix]

@bm777

Can I ask a quick question, will you also consider writing documentation for Nextron?

Yes, I have the desire to write a tutorial, but have not been able to do so. If I were to write one, I would like to put it somewhere close to the README. Because there is no official website for nextron. (Also, I want to create the official site for nextron!)

[bm777]

@saltyshiomix

Got it. README is also good for the beginning. Next step -> domain name :)

I will close this issue and open a new one next week :)

[divol89]

hello im stuck after i run yarn build my app shows nothing on the screen , just a blank window , can somebody tell me what i am missing ? thanks !

[bm777]

@divol89 It depends on the scope of your app. Is it calling outside API?

Mostly the problem comes from the main/background.js file.

Can you share it?

[divol89]

@divol89 It depends on the scope of your app. Is it calling outside API?

Mostly the problem comes from the main/background.js file.

Can you share it?

I started to build the app and once I decided to run npm run build I got the white app screen no matter what I try , then I just started new empty template and tried to do the “npm run build “ and the template by default have this behaviour .the template I use is nextron —typescript & tailwindcss if you can extend the explanation I will appreciate I’m student 👨‍🎓🤝.

[divol89]

@divol89 It depends on the scope of your app. Is it calling outside API?

Mostly the problem comes from the main/background.js file.

Can you share it?

DevTools listening on ws://127.0.0.1:51384/devtools/browser/5200c629-97ee-46bb-99cf-ba1a8ca1663e (node:40695) electron: Failed to load URL: http://localhost:8888/home/ with error: ERR_TOO_MANY_REDIRECTS (Use Electron --trace-warnings ... to show where the warning was created) (node:40695) UnhandledPromiseRejectionWarning: Error: ERR_TOO_MANY_REDIRECTS (-310) loading 'http://localhost:8888/home/'

[divol89]

@divol89 It depends on the scope of your app. Is it calling outside API?

Mostly the problem comes from the main/background.js file.

Can you share it?

Bro @bm777 I am struggling can you Help a bit to understand why the template by default is not loading any components after npm run build 🤪on the app,?thanks !

[bm777]

Hey @divol89, sorry, I have been busy with my startup. I will have a look this noon.

[bm777]

@divol89 can I provide you a template with tailwindcss + Javascript (instead of typescript?)

[divol89]

@divol89 can I provide you a template with tailwindcss + Javascript (instead of typescript?)

Yes please , some stable active working template @bm777 ! That will be perfect

[bm777]

@divol89 Here we go -> Nextron + JavaScript +TailwindCSS

git clone --branch js-tw https://github.com/bm777/nextron-speed-launch.git

Install deps and enjoy

cd nextron-speed-launch
npm i

# development mode
npm run dev

# production build (see the command in the package.json to run for your specific arch)
npm run build

---

It works if you follow the steps.

[divol89]

@divol89 Here we go -> Nextron + JavaScript +TailwindCSS

git clone --branch js-tw https://github.com/bm777/nextron-speed-launch.git

Install deps and enjoy

cd nextron-speed-launch
npm i

# development mode
npm run dev

# production build (see the command in the package.json to run for your specific arch)
npm run build

It works if you follow the steps.

Thanks bro! I really appreciate your time 🫶🏾 @bm777

[divol89]

@bm777 hello once again bro , I had set up the api with sqlite3 database but is not working on build any idea how or where I can learn to fix it ? , thanks !

[bm777]

@divol89 you can use this Next time, you can open a new issue. it is different from this topic, I will close this.

[divol89]

@divol89 you can use this Next time, you can open a new issue. it is different from this topic, I will close this.

Thanks boss I will do next time 🚀🔥

[bm777]

You are welcome 🙂