Hi Everyone, I’m new to both electron and Auth0 in general, so please excuse my ignorance as I fumble my way through my first attempt at integrating Auth0 into my electron project.
I started off by following this tutorial
https://auth0.com/blog/securing-electron-applications-with-openid-connect-and-oauth-2/
and I can get the sample project to run with their code. All good.
Now for the next step, I want to insert it into my electron project, which is a native app, and has various “sections” (pages), one being a login page.
The tutorial works in a slightly different manner than I need, it creates separate windows for all of it activities (logging in / registering) then when your authenticated, it destroys the login window and creates a main app window.
I already have my windows created, I just want to insert the login form into my already existing login page and when the login is authenticated, then redirect to another section (page) in my app vs closing or destroying windows.
So to start with, I installed the necessary dependencies (jwt, axios, keytar) into my node modules folder.
Then I copied the various pages of code (auth-service, app-process, auth-process) to my project and placed them in a /services subfolder.
Figuring the next piece of the puzzle would be to display the login form in my login page, and this is the part I’m stuck at.
In the tutorial, I’m taking a guess that this part of the code is what activates the login window
win.loadURL(authService.getAuthenticationURL());
//not sure what this is doing, setting some kind of session token I suspect
const {session: {webRequest}} = win.webContents;
const filter = {
urls: [
‘http://localhost/callback*’
]
};
//seems like this is waiting for a response from the auth0 site perhaps, then if authorized, creates new program window
webRequest.onBeforeRequest(filter, async ({url}) => {
await authService.loadTokens(url);
createAppWindow();
return destroyAuthWin();
});
win.on(‘authenticated’, () => {
destroyAuthWin();
});
So I thought, ok, instead of creating windows, I’ll just take the basic principal of calling the authorizationURL
win.loadURL(authService.getAuthenticationURL());
and assign it to a div on my page.
const authURL = authService.getAuthenticationURL();
$(‘#user-auth-form’).load(authURL);
…but instead of it displaying the auth0 login / reg form, I get one of the two following errors:
either I get cannot read property of session undefined, or if I comment out the session part, I get
Because a cookie’s SameSite attribute is set to none or invalid, it defaults to SameSite=Lax, and will prevent it from being sent cross site…
I’ve looked into this error, and it doesn’t seem like something I can set via meta headers, so I’m stumped as to why the tutorial project doesn’t have cors/sameSite issues, but I do.
I realize in order for someone to truly be able to help, they would need to see the project as a whole, and I’m absolutely willing to share it with anyone that might be able to get me past this hurdle.
thanks!
~Nick