OAuth login: tricky window URL manipulation

[iamtommcc]

This weekend I set out to implement a basic OAuth 2.0 login system for my Tauri App (a "Login via Google" experience powered by Supabase, specifically).

I found implementing this in Tauri surprisingly challening 🥴

• After the login I could not redirect users back to the web application running in Tauri, since Apple doesn't allow Webviews to redirect to non-HTTP(S) protocols, preventing me from redirecting back to tauri://localhost

  • Not sure if this also occurs on Windows/Linux 🤷
  • There may be something doable on the Tauri side to prevent this, but I don't know enough about Mac development to say for sure

• As a workaround, I figured I could use a local web server as the redirect destination. So I had my app spin up a Rocket server to listen for the redirects. However, for the redirect, Supabase (and many other Oauth implementers) were passing the Oauth token/parameters via document fragments (#foo=bar instead of ?foo=bar) which the Webview doesn't ever send to the server. Dang!

• I figured I I could at least try to detect the webview's attempted redirect and "rip out" the document fragments of the target URL manually - this way, loading failure wouldn't matter. However, I couldn't find any way to listen to page load events for my newly created Oauth login window.

Ultimately my final solution was:

1. Pre-define a window in tauri.conf.json that has no URL and is invisible by default. By having it defined pre-runtime, it gets properly picked up in the Tauri builder on_page_load
2. On the Supabase/Google side, set a random arbitrary redirect (even about:blank is fine)
3. When the user requests a log in, show() the login window and change the url via wry_window.eval("window.location.replace('http://my-oauth-login-page.com')")
4. In on_page_load, detect the final redirect (about:blank#access_token=123456), pull out the details from the # fragment, and emit them as needed
5. Hide the window

It works but the whole thing is quite unintuitive and fairly brittle!

Does anyone know if there's any cleaner solutions, or perhaps some APIs/events that I've missed? I suck at Rust so I wouldn't be surprised 😅

The few things that I feel would make Tauri a lot cleaner for this use case:

• A mechanism to detect page loads and/or navigation changes for all windows, not just pre-defined ones. Even having newly created windows trigger on_page_load would be great (is this potentially a bug?)
• A wry_window.load_url() method (similar to what Electron offers) would feel a load better than the eval-based location.replace() technique!
• Support for deep linking would circumvent a lot of this pain by potentially being able to rely on an actual browser window for Oauth logins rather than a webview

[holynewbie]

@iamtommcc could you please show the code how to detect the final redirect ?

[iamtommcc]

Sure! In main.rs, I added the following off of the builder. In a real app you'd likely want to add some conditional cehcks as to not fire receive-login for EVERY page load.

on_page_load triggers every time any Tauri window changes URL. Though to make this work you NEED to have the login window pre-defined in tauri.conf.json otherwide on_page_load will never fire (which I feel is probably a Tauri bug, but anyway).

    .on_page_load(|wry_window, _payload| {
      wry_window
        .emit_all(
          "receive-login",
          Payload {
            url: _payload.url().into(),
          },
        )
        .unwrap();
    })

Then in your JS, you'd go something like:

import { once } from "@tauri-apps/api/event";

once("receive-login", async (event) => {
        const params = new URLSearchParams(event.payload.url.split("#")[1]);
        
        const refreshToken = params.get("refresh_token");
        
        // further logic here as needed...
      });

[daun-io]

Hi, Can I see the full main.rs and tauri.conf.json that you used for supabase authentication? I'm going through exactly same situation and new to tauri. It would be really really really helpful for me.
Thank you so much.

[ryanrixxh]

on_page_load triggers every time any Tauri window changes URL

Hello, I cant seem to get this part to work properly. I have a command that I am invoking from the frontend that shows a predefined window when a button is clicked, and then changes the URL of that window:

#[tauri::command]
fn open_login(app_handle: AppHandle) {
    let window = app_handle.get_window("login").unwrap();
    window.show();
    window.eval("window.location.replace('https://google.com')");
}

But this does not trigger an on_page_load for me. It is only triggered when the two windows are first loaded up and the application is launched.

My builder code:

  tauri::Builder::default()
    .setup(|app| {
      Ok(())
    })
    .on_page_load(|_wry_window, _payload| {
      println!("page loaded");
    })
    .invoke_handler(tauri::generate_handler![open_login])
    .run(tauri::generate_context!())
    .expect("error while running tauri application");

I think this may have something to do with the fact that .on_page_load doesnt trigger for remote windows so I'm curious how you got it to work with an external authenticator. Any chance you could provide a more complete example of this? I'm new to Tauri and also having a lot of trouble with this.

[silvanshade]

@ryanrixxh I also was unable to get that approach to work.

I have created an alternative example that does work in this gist. The key is using the .on_navigation method which was recently merged, along with some low-level interfacing with the underlying PlatformWebview in order to trigger a navigation to the authentication URL after the blank page has been loaded.

[ryanrixxh]

Thanks for the response. I took a look over the gist and looks good but can't seem to get it work. Seems like I'm using an older version of the crate. Is this merge part of the 2.0.0 alpha?

Checked your pull request on this feature and it came one week after the most recent release. Do I need to wait a bit to start using this without building from source code myself?

[ghimiremanish]

I am also trying to implement sign-in with google using firebase or next auth to my Tauri, nextjs project. Couldn't find any solution. I tried the above gist as well but didn't work for me as well.

[silvanshade]

For the code in the gist to work (if you don't wait for the next release) you need to use the tauri revision mentioned in the Cargo.toml file with the patch directive. See this part at the bottom of the file:

# this revision is needed for the .on_navigation method in commands.rs
[patch.crates-io]
tauri = { git = "https://github.com/tauri-apps/tauri", rev = "3f35b45" }

[duaneking]

The Gist was removed? Its 404

[igorjacauna]

Hi folks, just came here to say that I created this simple project as example that makes login on Firebase through Google OAuth 2.0. Using OAuth Tauri Plugin to help the process.

[Asturgeek]

Appimage same problem....

[JeaneC]

I wrote a simple example for Supabase specifically using the OAuth Tauri Plugin as well!

https://github.com/JeaneC/tauri-oauth-supabase

[RainyNight9]

Example：

• English reference:

  • https://dev.to/rain9/tauri-7-implementing-oauth-login-functionality-2bkl
  • https://dev.to/rain9/tauri-6-invoke-desktop-application-functionality-through-the-browser-811

• Chinese reference :

  • https://juejin.cn/post/7462081222710591497
  • https://juejin.cn/post/7462420892509863986