This content originally appeared on DEV Community and was authored by David Rickard
When I first went to integrate Auth0 with my Tauri app, I followed the Electron Auth0 guide.
This approach tells you to create another Electron window and serve the authentication page in it. Then to intercept the callback redirect and extract the code from the URL. I was trying to adapt this to Tauri but running into a wall: You can't intercept navigations for external content in Tauri. 1.3 added an on_navigation handler for the WindowBuilder but that just did not work, and the AppHandle was not accessible from the registered closure.
At this point I just had to back up and figure out how to do this without trying to load the auth page in a WebView. The best practices for a while now have encouraged running authentication through a browser. Authenticating in the browser has a couple of key advantages:
- It lets the user re-use signed in state for 3rd party authentication providers like Google/Facebook, potentially eliminating the need for them to type in any username or password
- It provides better security for the user because they don't need to type in passwords in an app, which could potentially host a lookalike site that is just harvesting their Google password
Thankfully it turns out it's relatively straightforward to do it correctly here.
Send to the browser instead
The guide tells you how to generate a login URL. Instead of trying to load it ourselves, we need to hand it off to the default browser. From JS you'd use the open from the shell API. From the backend you can use the webbrowser crate.
In the meantime the app can display a message asking them to check their browser and complete the authentication there.
Return URL
You'll need to update the return URL to send you back to your app instead. This URI can be something like myapp:auth, where myapp is your app's registered protocol.
1) Change the return URL embedded in the auth URL, by changing the redirect_uri parameter.
2) Update the Application configuration in Auth0 to allow the new callback URI.
After the authentication succeeds in the browser, it will invoke myapp:auth?code=abc..., which can activate your waiting app.
Protocol handler
You can use the tauri-plugin-deep-link crate to register your app as a protocol handler. After you get your code, you can exchange it for an auth token in the same manner as the Electron guide, but for Rust you can use reqwest for the HTTP call.
Store credentials with keyring
You can store the token with the keyring crate.
The token refresh works the same as in the official guide.
This content originally appeared on DEV Community and was authored by David Rickard
David Rickard | Sciencx (2023-05-06T21:18:31+00:00) Using Auth0 with Tauri. Retrieved from https://www.scien.cx/2023/05/06/using-auth0-with-tauri/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.