Securing Electron Applications with OpenID Connect and OAuth2

Blog Discussions
, , , ,
51

How should I integrate auth when i want to use @auth0/auth0-react? I have tried three ways and they all fail at different stages.

  1. use localhost redirect_uri. f.e redirect_uri: http://localhost:5173/callback. I’ll redirect to index.html with searchParams.
mainWindow.webContents.on('will-redirect', (event, url) => {
    if (url.startsWith('http://localhost:5173/callback')) {
      event.preventDefault()
      const search = url.split('?')[1]

      const newUrl = join(__dirname, `../renderer/index.html`)
      mainWindow.loadFile(newUrl, { search }).catch((error) => {
        console.error(`Failed to load URL: ${error.message}`)
      })
    }
  })

This logs in properly → library says user is authenticated → redirects properly. But after redirecting to a protected page, the library suddenly can’t get the auth data. F.e the user is nullish in const { user } = useAuth0.

  1. redirect_urifile://callback. Handle will-redirect like in step 1. This fails at https://auth0..../authorize/resume 302 redirect and throws net::ERR_UNSAFE_REDIRECT in chrome devtools. When I relaunch the app, the user is logged in tho. So it almost works as well.

  2. Register and use a custom protocol such as redirect_uri: myapp//callback. This fails at redirect because myapp://callback not a proper url.