Tauri + Google/GitHub OAuth with Supabase

Check out this example on how to setup MagicLink and OAuth (Github and Google) in Tauri using Supabase. This is based off of the Supabase starter with React.

https://supabase.com/docs/guides/getting-started/tutorials/with-react.

Supabase has a generous free tier so you should be able to use this for your projects easily!

Setup

After cloning the repo, please make sure to do the part on database schema setup. This will create the backend for your app.

Then make sure to clone our .env.local.example to create a new .env.local. In there, configure your env items from Supabase. Remember to configure this again when you deploy to prod!

Finally,

pnpm i
pnpm tauri dev

Signup for GitHub and Google OAuth

Follow these guides from Supabase. If these guides ask for a website, just link your github or a google doc

For Google, remember to add your email as a testing account.

How we deal with OAuth

The trickiest part about OAuth is the redirect in a desktop app. Once a user finishes authorizing on Google, where do we link them to? Deeplinks are a common concept in mobile apps but Tauri is still a WIP on this.

I benefited from reading this thread on window URL manipulation and looking at the Tauri discord. I had to deal with a few more painful things because Supabase and Tauri are rapidly updating their platforms.

The short bit is

  • Your app has a hidden web browser view that we listen to events. Call this localhost:9999.
  • When user tries to do OAuth, initialize the OAuth provider with a redirect url to localhost:9999.
  • Then we open up the user’s main browser to ask them to authenticate with Github or Google.
  • Once the user authenticates on an external platform, the redirect will bring them to localhost:9999 with a query param in it, e.g localhost:9999?code=abcd
  • We need that code to finish our PKCE authorization flow with supabase. Since we were listening to this port, we just parse it from our hidden browser.

Thanks to https://github.com/FabianLars/tauri-plugin-oauth for the seamless setup.

Gotcha with Supabase and Tauri

Idk where the fault is here, but Supabase’s native storage solution doesn’t work well with Tauri. I spent countless hours debugging this. You’ll see we just opt for native localStorage which is a fine choice for most apps.

Supabase Auth Notes

  • Supabase now has a very low rate limit for emails. This can affect your magic link deliverability if you don’t choose your own SMTP.
  • Google OAuth takes around a week to be approved for public use. They also require a privacy policy url.
  • GitHub is my personal favorite. Easy to setup.

Learn More

To learn more about React Native, take a look at the following resources:

  • Blog – read the latest official React Native Blog posts.
  • React Books – The Best React Books for Beginners of 2023.

GitHub

View Github

no tags