How to use Magic with Electron app?

[mlejva]

✅ Prerequisites

• [x] Did you perform a cursory search of open issues? Is this question already asked elsewhere?
• [x] Are you reporting to the correct repository (magic-sdk)?

❓ Question

We are working on an Electron app and would like to use Magic. Currently, we can't use magic-js in the render process of Electron due to the fact that as far as I know we can't make Magic to redirect back to the Electron app (what should be the URI here?). At the same time Magic can't be used from the main process of the Electron app because the window object isn't present.

Right now, we are solving this by opening a browser tab for our user with our website in it. This website then loads the Magic script and tells user to check their email. Once user clicks on a link in their email they are redirected back on our website which tells them they can now safely navigate to the app.

await magic.auth.loginWithMagicLink({
  email,
  showUI: false,
  redirectURI: // <-- URI to an endpoint on our server
});

We would like to call loginWithMagicLink on the Electron frontend and then get the magic_credential parameter from the redirectURI on the server, from where we would (securely) send it to the electron app, where we would finish the login flow by calling loginWithCredential.

This is the error we get right now

Is there currently a way to solve this?

🌎 Environment

Software	Version(s)
magic-sdk	4.0.2
Browser	Electron
yarn
Operating System	macOS 11.1

[smithki]

@mlejva Wanted to ack this for you. I will have a chance to investigate this early next week.

[mlejva]

@smithki Thanks! Let me know if you need more info.

[smithki]

Okay, so just to make sure I understand the flow you're trying to implement here, it goes like this:

1. User clicks sign in from your Electron app
2. User clicks magic link email from their inbox
3. The redirectURI provided to Magic SDK in step 1 is a server-side endpoint and calls loginWithCredential
4. You're logged in! Profit!

The issue occurs at step 3, which can't happen server-side because the design of our key management is non-custodial. However, It's possible to solve this with a few extra steps, but it does get a bit "convoluted" (sorry in advance):

1. User clicks sign in from your Electron app
2. User clicks magic link email from their inbox
3. The redirectURI is a static page you host in the browser and call loginWithCredential
4. Perform a deep-link redirect back to your Electron app with the DID token generated in step 3 encoded as a query parameter.
5. You're logged in! Profit!

[ValentaTomas]

Hey, I'm the other guy trying the implement this flow.

Just a few clarifying questions about the flow you proposed:

1. User clicks sign in from your Electron app

We will be calling loginWithMagicLink from the electron app? Right now the redirectURI is checked by magic-sdk and if the domains don't match there is an error.

3. The redirectURI is a static page you host in the browser and call loginWithCredential

Should this page be hosted by a server inside the electron app?

[smithki]

We will be calling loginWithMagicLink from the electron app? Right now the redirectURI is checked by magic-sdk and if the domains don't match there is an error.

I'm not too experienced with Electron myself, can you tell me what's the URL origin for a typical Electron context? Is it just localhost?

Should this page be hosted by a server inside the electron app?

Hopefully this will be possible soon 🤞 but first we'll need to implement a few changes on our side to support deep-linking redirects. The static page you host should be rendered in a browser (not Electron) until we have native support!

[ValentaTomas]

I'm not too experienced with Electron myself, can you tell me what's the URL origin for a typical Electron context? Is it just localhost?

During the development, the Electron app has usually the localhost origin, but when the app is packaged the origin has the file:// protocol.

[smithki]

During the development, the Electron app has usually the localhost origin, but when the app is packaged the origin has the file:// protocol.

Hmmm, this could actually pose a problem using redirectURI because we rely on the URL origin to be consistent. I'll raise this with our platform team so we can try to work through the potential security edge-cases. I'll have something more substantial to share next week!

[smithki]

when the app is packaged the origin has the file:// protocol.

@ValentaTomas - Can the built Electron app serve from a custom protocol, for example: can the electron app call loginWithMagicLink from a context where the referrer is my-app://some-path? If this is the case, we could support deep-linking quite easily.

[ValentaTomas]

I haven't tried it yet, but from the docs, it looks pretty straightforward. Here are the links if you want to take a look:

https://www.electronjs.org/docs/api/protocol https://www.electronjs.org/docs/api/app#appsetasdefaultprotocolclientprotocol-path-args

I will check if setting the default protocol affects the protocol from which the app is served.

[smithki]

@ValentaTomas Any updates on your side? I'm eager to know if the app-scheme solution will work or if we need to keep tinkering...

[mlejva]

Hey @smithki, sorry for not responding earlier. We were shipping some updates to Devbook that we had to prioritize. We will take a look into it this weekend and let you know!

[ValentaTomas]

I have updates @smithki! The custom protocols for Electron are working - we can serve the packaged app from devbook://, and magic-sdk recognizes the domain. I tested it on both macOS and Windows because there were supposed to be some platform-specific settings and everything looks well.

The bad news is that magic-sdk seems to require HTTP/HTTPS in the redirectURI:

I also experimented with opening devbook:// protocol links from the browser, and that seems to work - this way we will be able to intercept the call, parse the information from the URL, and call loginWithCredentials. The deep-linking would be accomplished by having the redirectURI as something like devbook://auth/redirect, but that is not possible right now, correct? Or am I missing something about the deep-linking or redirection?

[smithki]

The custom protocols for Electron are working - we can serve the packaged app from devbook://, and magic-sdk recognizes the domain.

Perfect, this should make supporting deep linking much simpler from our side.

The bad news is that magic-sdk seems to require HTTP/HTTPS in the redirectURI

Sorry if I didn't make this clear in my previous message, it's not something we support right now, but we can easily support it in the future. I want to set a realistic expectation about where this falls on our schedule in terms of priority: it's probably ~4 weeks out. I appreciate your patience on this; it's 100% something we need to have because it unblocks more than just your use-case!

[ValentaTomas]

No worries, for now, we can make do with the browser tab approach. Just ping this thread when you have it ready.

[Faolain]

Hey @smithki did you guys ever get a chance to get around to this? Looking at a similar usecase as Valenta. If not no worries, just curious :)

[ariboren]

We're also hoping for a solution for this -- would love an update! Thanks.

[smithki]

@Faolain @ariboren -- Sorry for the poor communication here, things have been pretty busy as I'm sure you can imagine 😅

A better integrated redirect approach using native app identifiers (my-app://...) is still something we're interested in doing. I'm sad to say it is lower priority than other features on our roadmap such as SMS login, multi-factor auth, and email allowlists/blocklists.

I will ping this thread when this improvement can be prioritized again. For now, the browser tab approach is our best recommendation.

[ariboren]

Hi @smithki - any update on this? Would love to be able to offer a unified redirect experience across our web, mobile and desktop (Electron) apps. Thanks.

[smithki]

@ariboren I don't have any meaningful updates to share, but can re-confirm that this is something we are interested in building better support for.

[JoaoCampos89]

Hey @smithki this allows as well apps to be built on capacitor js, and it will enable people to use magic to build mobile apps, can you provide any timeline for this? I would like to try this to build my mobile app

[joshuascan]

Hi everyone,

I'm currently going through our older issues as part of an effort to tidy up our project's issue tracker and ensure that all discussions are still relevant and actionable. Since this issue is over a year old, I'm going to be closing it out, but if anyone would like to continue the discussion, please feel free to ping me and I can reopen it.

A couple things to note that might help with the issues mentioned in the thread:

• We offer a loginWithEmailOTP method which does not require a redirect. This might help with the Electron redirect issue.
• The most recent comment expressed a desire to build a mobile app using Magic. We now have React Native Bare & Expo packages, as well as iOS and Android packages.

Thanks!