jbreckmckye / electron-auth0-login Goto Github PK

Hi, thank you for creating this library! I saw that you released v2 right as I was looking to integrate Auth0 & Electron.

I'm getting a type error when trying to call getToken() because I'm not passing in any arguments.

The library seems to be generating the following types for the auth object (This is the index.d.ts file in node_modules/electron-auth0-login/dist):

import { Config } from './types';
declare const _default: (config: Config) => {
    getToken: (input: unknown) => Promise<string>;
    isLoggedIn: (input: unknown) => boolean;
    login: (input: unknown) => Promise<string>;
    logout: (input: unknown) => Promise<void>;
};
export = _default;

Installing Keytar is a pain and appears to have some security shortcomings on Windows. More fundamentally I've never liked the workflow of having to install it as a peer dependency and then use codependency to call it.

I'd like to alter the plugin to allow the user to supply their own key storage mechanism, compatible with keytar but also anything else that follows a simple interface.

Google regularly reject logins made in a BrowserWindow. I have MFA enabled on my Google account and it just doesn't allow it:
https://support.google.com/accounts/thread/22873505?hl=en

The recommended way to do this is to open the Auth0 login URL in the users default browser via shell.openExternal(url). This also has the added bonus that users are almost certainly already logged in with any auth providers so no need to do login+MFA again.

For this to work, you need to host a static page that Auth0 redirects to after login. This page needs to have user instructions and JavaScript which returns the token to the app. There are few different ways to do this.

Localhost Websocket

I noticed Discord and a few others doing this. Your app exposes a websocket on localhost and any website, even one in a secure context can send it the token via the websocket. I haven't looked too deeply into this because it's complicated and it feels like opening a websockets to every website has security implications that I don't fully understand...

Protocol Handler

You're Electron app can register my-app:// protocol and you can redirect to that URL and the browser will pass the full URL to your app.

I've got an app that does this but it has a number of downsides:

• Never got this working on Linux
• There are prompts in all browsers which users may dismiss
  • I haven't checked this for a while but I remember in one browser if it was dismissed, it wouldn't prompt again!

Clipboard

Courtesy of Ani Betts:
https://twitter.com/anaisbetts/status/1470879935552237574

1. Desktop app opens Auth0 URL in browser
2. Desktop app saves a copy of the clipboard
3. Browser does sign-in, gets a token
4. Browser saves the token in the clipboard, instructs user to go back to desktop app
5. Desktop app is waiting on window focus, when it gets it, it reads the clipboard
6. Restore old clipboard contents

We're using request-promise-native as a peer dependency just to POST some JSON with a promise wrapper - this could be done easily with either the Node HTTP or Electron ClientRequest APIs.

One of the goals of v2 is to make this library easier to install.

i dont see version 1.3.0 only version 1.1.0 on npm? and only 1.0.1 on github?

Hi,

It seems like the dist folder is missing from what's installed by NPM, and therefore trying to boot my app results in:

Error: Cannot find module '/Users/XX/Documents/web-dev/XX/XX/node_modules/electron-auth0-login/dist/index.js'. Please verify that the package.json has a valid "main" entry

Any ideas?
Thanks!

Using logout() it does clear the keytar data so next time when the user tries to log in a new browser window appears to ask the user about logging in:-

The issue
The issue however is that it doesn't call the IDP logout endpoint (https://auth0.com/docs/logout/log-users-out-of-idps) so next time when a new user tries to login he automatically logs into the first account, whether you press "Not your account?" or not.

Last screen after the user logs in without any auth0 email or password:-

Our application has a certain style and UX standards that we need to follow. The login window that this package has a hard-coded configuration that doesn't allow us to hide the titlebar, chrome, or specify the size.

Ideally, we'd like access to a subset of the BrowserWindow parameters and have those passed down through the standard config object in a property called "browserWindowConfig".

Hi! I just came across this package and i would like to use it in my app that's based on https://github.com/electron-react-boilerplate/electron-react-boilerplate.

I use https://github.com/sindresorhus/electron-store as my local data store.
I use typescript so while using electron-store as the store for this package, i found out that it they were incompatible.

Any example of how to use a custom store with or without electron-store?

UPDATE: So i managed to create an object based on electron-store and the type error disappeared.
Now the new issue that arose is the error received after setting the onClick of a react button to the function below:

async function getToken() {
    try {
      const token = await auth0.login();
      alert('getToken success ==>' + `See console`);
      console.info('Token:', token);
    } catch (e) {
      alert('getToken failed ==> ' + `See stdout. Error was "${e.message}"`);
      console.error(e);
    }
  }

The error ==>

HTTPError: Response code 400 (Bad Request)
    at Request.<anonymous> (F:\aye\nodejs\electron\MyApp\node_modules\electron-auth0-login\node_modules\got\dist\source\as-promise\index.js:117:42)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)

I have the following error: when I create an app in auth0 of type 'machine to machine' the method getToken I return a 401 with access denied. On the other hand, if I use a 'native' type app if it works for me, why is this?

Hello guys,

this is not particularly an issue, just mine. You should delete this later guys.

I would like to kindly ask you if you could help me to implement your solution to basic Electron Quick Start so I could learn and understand how to do it in most simple/basic way. I've tried, but failed in every way:

1. I've created auth.js, pasted your code and filled Auth0 credentials

• and this is literally how far I've got

• I couldn't use "import" in main.js (throwing me an error with can't use import outside a module)
• don't know how to implement auth.js into main process (BrowserWindow) so there will be Auth0 login loaded just after app launch (if I get it correctly)
• is it also possible to launch login by clicking some "Log in" button and redirect users to other screen/html file after success? (something like protected route in react).

Thank you very much in advance, for your patience, effort and any help in this case! All the best, Tomas

Hi @jbreckmckye,

Thanks for this library. Very useful :)

I don't find references for this part of the request in the Auth0 doc: https://auth0.com/docs/login/authentication/add-login-using-the-authorization-code-flow-with-pkce#basic-authentication-request 🤔

Was it something previously asked by Auth0 that is not required anymore, maybe?

Using Angular 8.2 and Electron 6.0.2

ERROR in ../node_modules/electron-auth0-login/dist/index.d.ts:5:25 - error TS2304: Cannot find name 'Config'.

5 constructor(config: Config);

Any ideas on the typings? Do I need to change something in my Angular config?

This plugin has gone beyond a demo project and now needs some tests. Manual testing will not scale.

A few months ago Auth0 published their own guide to adding auth to Electron apps: https://auth0.com/blog/securing-electron-applications-with-openid-connect-and-oauth-2/

I want to take a look at this and evaluate the documented approach as a replacement for this library. At the very least it may be good to point users at the doc for directions on rolling their own auth.

When the browserwindow opens and goes to the auth0 login URL, it tries to use a script (lock.min.js) that fails to load. The complete error is:

Failed to load resource: net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep

Obviously, this makes page unusable. Any idea why this might be happening?

Any help to point me in the right direction would be much appreciated.

Hi,
In the readme files import a function called getToken:

import { getToken } from './auth';
but it seems the function is named auth0Login:

export default auth0Login({

I am calling the logout() while closing the app. But the next time again when I open the app it is not asking for a login. The logout() should remove the the all the token data right ?
I have also set the useRefreshTokens: true

Thanks,

The config object in the types.ts file doesn't have a parameter for the db connection of auth0 and it should be included as the auth0 API documentation shows in their official documentation

as shown in the config of auth0 object it doesn't have a connection option to determine which db the user can use if a single application is using multiple

// Details of the Auth0 application
auth0: {
    // Get these from your Auth0 app dashboard
    audience: string,
    clientId: string,
    domain: string,
    // This will be custom to your application, e.g. 'given_name profile'
    scopes: string
},

I am getting a conflict when trying to install to my electron project using npm. Has anyone seen this issue before and is there a way to resolve it?

Hello,

Here is mine setup:

In angular component I did the following:

import { ElectronAuth0Login } from 'electron-auth0-login';

  constructor(private router: Router, private store: Store<IAppState>) {
    new ElectronAuth0Login({
      // Get these from your Auth0 application console
      auth0Audience: 'https://myaudience,
      auth0ClientId: 'myclientid',
      auth0Domain: 'mysite.auth0.com',
      auth0Scopes: 'openid profile read:current_user'
    });
  }

And I am getting error:

Path must be a string. Received undefined
    at assertPath (path.js:28)
    at dirname (path.js:1364)
    at Object.exports.findPackage (index.js:209)
    at Object.exports.register (index.js:295)
    at Object.<anonymous> (index.js:19)
    at Object.module.exports (index.js:152)
    at __webpack_require__ (bootstrap 53044806b26765e6337a:49)
    at Object.<anonymous> (index.ts:1)
    at __webpack_require__ (bootstrap 53044806b26765e6337a:49)
    at Object.<anonymous> (index.ts:1)
    at __webpack_require__ (bootstrap 53044806b26765e6337a:49)
    at Object.<anonymous> (app.routes.ts:2)
    at __webpack_require__ (bootstrap 53044806b26765e6337a:49)
    at Object.<anonymous> (app.component.ts:19)
    at __webpack_require__ (bootstrap 53044806b26765e6337a:49)
    at Object.<anonymous> (index.ts:1)
    at __webpack_require__ (bootstrap 53044806b26765e6337a:49)
    at Object.<anonymous> (main.browser.ts:1)
    at __webpack_require__ (bootstrap 53044806b26765e6337a:49)
    at Object.<anonymous> (external "require('zlib')":1)
    at __webpack_require__ (bootstrap 53044806b26765e6337a:49)
    at bootstrap 53044806b26765e6337a:147
    at main.bundle.js:152

Hi all. It's been about four years since I first wrote this project, and maybe eighteen months since I refactored it.

Since then there's a been a small but steady trickle of usage, but probably not enough to treat this as a major concern. At the same time, I haven't worked on Electron apps in a little while, nor on Auth0, so I haven't had much use for this in my day job.

Sometimes suggested improvements do come down the line, like #35, which would help the library considerably but which I can't find time to work on.

I think this library might benefit from a slight change in direction. Specifically, I'm thinking of writing this as a generic Electron Authentication widget.

The reason for this:

• The combination of Auth0 and Electron is niche, and in any case they promote their own boilerplate
• I may have some Electron work coming down the line in my day job, but the auth backend will be Okta, not Auth0
• I've already done the work of refactoring this app to support several IO adapters - hopefully this would get us towards something more generic

What I'm thinking of doing therefore is

• writing a spike to integrate with an Okta PKCE flow
• writing a spike to integrate with a custom auth flow
• using this to evaluate moving to a new, generic package

If I can do that, my hope is that there'd be more users, which in turn would help me justify building more features. It might also attract more outside contributions.

I probably wouldn't have time to do this immediately, but perhaps in the next couple of months. If so, I'll post some updates.

type error with version 1.3.0
Uncaught TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined

The optionalPeerDependency defined in package.json:

  "optionalPeerDependencies": {
    "keytar": "4.3.0"
  }

results in this error when running yarn start with electron 7 and keytar 5 installed:

 App threw an error during load
Error: Version "5.0.0" of module "keytar" required by "electron-auth0-login" does not satisfy required range "4.3.0".
    at realRequire (c:\Users\Mustafa\dev\smart-margin-desktop\node_modules\codependency\index.js:184:9)
    at requirePeer (c:\Users\Mustafa\dev\smart-margin-desktop\node_modules\codependency\index.js:326:10)
    at Object.<anonymous> (c:\Users\Mustafa\dev\smart-margin-desktop\node_modules\electron-auth0-login\dist\index.js:20:16)
    at Module._compile (internal/modules/cjs/loader.js:880:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:892:10)
    at Module.load (internal/modules/cjs/loader.js:735:32)
    at Module._load (internal/modules/cjs/loader.js:648:12)
    at Module._load (electron/js2c/asar.js:717:26)
    at Function.Module._load (electron/js2c/asar.js:717:26)
    at Module.require (internal/modules/cjs/loader.js:775:19)
    at require (internal/modules/cjs/helpers.js:68:18)
    at Object.<anonymous> (c:\Users\Mustafa\dev\smart-margin-desktop\public\auth\auth.js:1:28)
    at Module._compile (internal/modules/cjs/loader.js:880:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:892:10)
    at Module.load (internal/modules/cjs/loader.js:735:32)
    at Module._load (internal/modules/cjs/loader.js:648:12)

I've tested electron-auth0-login with keytar 5/electron 7 and everything seems to work.

• Make it easier to manually test the plugin
• Will need this to thoroughly test refactor