3

Trying to get auth0 working with my electron app. When I follow the default tutorial and try to authenticate with Username-Password-Authentication, the lock fails with a 403 error and responds with "Origin file:// is not allowed".

I've also added "file://*" to the Allowed Origins (CORS) section of my client settings in the auth0 dashboard.

Auth0 Lock with console errors

Origin file:// is not allowed

EDIT:

Lock setup in electron

var lock = new Auth0Lock(
   'McQ0ls5GmkJRC1slHwNQ0585MJknnK0L', 
   'lpsd.auth0.com', {
    auth: {
            redirect: false,
            sso: false
    }
});

document.getElementById('pill_login').addEventListener('click', function (e) {
    e.preventDefault();
    lock.show();
})
Lawrence
  • 327
  • 1
  • 12
  • Try setting up a local http server. PHP, node, and python have simple http servers built in. – Ben Harris Jan 26 '18 at 16:11
  • 1
    Please use the stackoverflow image uploader for images as this removes the possibility of the images becoming detached from the question. Also, please paste code in a code block instead of uploading an image of the code to assist people with recreating your problem through copy/paste (Create a code block by having every line of code indented with at least 4 spaces or 1 tab) – Scoots Jan 26 '18 at 16:15
  • @Scoots I used the image button on the top of the question editor to upload the pictures, could you direct me to the correct location to upload pictures? – Lawrence Jan 26 '18 at 16:25
  • 1
    My apologies then, I must have misread the URL. That is a perfectly acceptable way of including images. – Scoots Jan 26 '18 at 16:26
  • @Scoots Ahhh, you must have 10 reputation before including images in the question. Downside of only creating my account today! – Lawrence Jan 26 '18 at 16:27
  • @BenHarris trying out this idea. I'm going to try and spawn a node child process that acts as a behind-the-scenes http server that runs inside the electron app – Lawrence Jan 26 '18 at 16:44
  • @LawrenceZahner sounds good. Serving `file://` URLs makes a lot of things tricky. – Ben Harris Jan 26 '18 at 16:48

1 Answers1

4

I was able to get Auth0 to work by using an internal express server in my electron app to handle serving pages.

First I created a basic express app in a separate folder in my project called http, here will be the express server code and html files to serve. 

const path = require('path');

const express = require('express');
const app = express();

app.use(express.static(process.env.P_DIR)); // Serve static files from the Parent Directory (Passed when child proccess is spawned).

app.use((req, res, next) => {
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:<PORT>'); // Set this header to allow redirection from localhost to auth0
    next();
})


// Default page to serve electron app
app.get('/index', (req, res) => {
    res.sendFile(__dirname + '/index.html');
})

// Callback for Auth0
app.get('/auth/callback', (req, res) => {
    res.redirect('/index'); 
})

// Listen on some port
app.listen(&lt;SOME_PORT&gt;, (err) => {
    if (err) console.log(err);
    console.log('HTTP Server running on ...');
});

Then in the Electron main process, I spawn the express server as a child process 

const {spawn} = require('child_process');

const http = spawn('node', ['./dist/http/page-server.js'], {
    env: {
        P_DIR: __dirname // Pass the current dir to the child process as an env variable, this is for serving static files in the project
    }
});

// Log standard output
http.stdout.on('data', (data) => {
    console.log(data.toString());
})

// Log errors
http.stderr.on('data', (data) => {
    console.log(data.toString());
})

Now the auth0 lock authenticates as expected.

Lawrence
  • 327
  • 1
  • 12