Setting Up Basic Auth in Tauri with Clerk

Hey reader 👋, welcome to another blog post! In this post, we will explore how to set up basic authentication in a Tauri application using Clerk. We will begin by providing an overview of Tauri and Clerk, highlighting their features and capabilities. Then, we will delve into the steps involved in integrating Clerk’s authentication system into a Tauri application, including setting up the Clerk SDK, configuring the authentication flow, and handling user authentication. From the webview portion of the Tauri application, we will interact with the Clerk authentication system to authenticate users and manage user sessions. Not from Rust, but from JavaScript, we will call the Clerk SDK to handle the authentication process.

Please note that this post needed to go out quickly and implementing cards and other features like tabs for different tools, npm, bun, pnpm etc. will be added in the future. For now I will be writing this for pnpm.

Some Quick Context

I decided on this approach for two reasons, one being that I am still learning Rust, but have been a React and React Native developer for 5+ years now and am OG with Clerk. The second reason is that for a strictly desktop application, I believe that that the webview portion of the Tauri application is the best place to handle the authentication process, in that the additional information you would need to store in the Rust side of the application would be minimal and you could handle most tasks which require user context in the webview or pass that context to the Rust side of the application from the webview. This also means that in most cases where the additional scope/data which would be supplied by Clerk’s backend API would more likely fit in an actual server. It would behove you to look at the architecture of the application and see where best to use that context. That is to say, if you reach the point of complexity where you need to use the context from the backend API, you should probably be using a server for these processes and not the desktop application.

You can totally disagree with me on this, but I think it’s a good approach for a simple desktop application. Once there is additional complexity, you should be making your own decisions on how to handle the context. This is merely here to get you started.

What is Tauri?

Tauri is a framework for building tiny, fast binaries for all major desktop and mobile platforms. Developers can integrate any frontend framework that compiles to HTML, JavaScript, and CSS for building their user experience while leveraging languages such as Rust, Swift, and Kotlin for backend logic when needed.

What is Clerk?

Clerk is a user authentication and identity management platform that provides a complete solution for managing user authentication, authorization, and user data. It offers a range of features, including user registration, login, password reset, multi-factor authentication, and social login. Clerk provides a secure and scalable authentication system that can be easily integrated into web and mobile applications. It handles user authentication and session management, allowing you to focus on building your application’s features and functionality.

Setting Up Basic Auth in Tauri with Clerk

Now that we have an understanding of Tauri and Clerk, let’s dive into setting up basic authentication in a Tauri application using Clerk. We will walk through the steps involved in integrating Clerk’s authentication system into a Tauri application, including setting up the Clerk SDK, configuring the authentication flow, and handling user authentication.

Step 1: Setting Up a Tauri Application

First, we need to set up a Tauri application. You can create a new Tauri project using the Tauri CLI by running the following command:

Note: This blog post is using the beta version of Tauri v2.

pnpm create tauri-app --beta

This will create a new Tauri project with the necessary files and configurations.

Note: Make sure you have Node.js and pnpm installed on your system. You can install pnpm using npm by running npm install -g pnpm.

Step 2: Setting Up Clerk

Make sure you head over to clerk.dev and sign up for an account. Once you have signed up, create a new project in the Clerk dashboard and take note of your project ID and API key. We will need these credentials to integrate Clerk into our Tauri application. Clerk provides a JavaScript SDK that we can use to interact with its authentication system. For this step we are basically following the react guide on Clerk’s documentation, so you can head over to the Clerk React Guide to get started.

After you have signed up and created a project, you can install the Clerk SDK in your Tauri application by running the following command at the root of your project:

pnpm add @clerk/clerk-react

This will install the Clerk SDK in your Tauri application. Next make sure you grab your project ID and API key from the Clerk dashboard and add them to your Tauri application. You can add them to your .env file in the root of your project:

VITE_CLERK_PUBLISHABLE_KEY=pk_test_1234567890

Step 3: Configuring the Clerk SDK in the React Portion of the Tauri Application

Now that we have installed the Clerk SDK and added our project ID and API key to our Tauri application, we can configure the Clerk SDK in the React portion of the application. We will set up the ClerkProvider in our React component to handle the authentication flow. Here is an example of how you can configure the Clerk SDK in your React component:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import "./styles.css";
import { ClerkProvider } from "@clerk/clerk-react";

const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY;

if (!PUBLISHABLE_KEY) {
  throw new Error("Missing Publishable Key");
}

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <ClerkProvider publishableKey={PUBLISHABLE_KEY}>
      <App />
    </ClerkProvider>
  </React.StrictMode>
);

What this does is wrap our App component in the ClerkProvider component and pass in the publishableKey prop with the value of our Clerk project’s publishable key. This will allow the Clerk SDK to interact with the Clerk authentication system.

TODO: LINK TO BLOG POST ABOUT THESE REACT CONCEPTS

Step 4: Handling User Authentication

Now that we have configured the Clerk SDK in our React component, we can handle user authentication in our Tauri application. We can use the Clerk SDK to authenticate users, manage user sessions, and handle user data. Here is an example of how you can handle user authentication in your Tauri application:

import {
  SignedIn,
  SignedOut,
  SignInButton,
  UserButton,
} from "@clerk/clerk-react";

export default function App() {
  return (
    <header>
      <SignedOut>
        <SignInButton />
      </SignedOut>
      <SignedIn>
        <UserButton />
      </SignedIn>
    </header>
  );
}

Here we are using the SignedIn, SignedOut, SignInButton, and UserButton components provided by the Clerk SDK to handle user authentication. The SignedIn component will render its children if the user is signed in, while the SignedOut component will render its children if the user is signed out. The SignInButton component will render a button that allows the user to sign in, while the UserButton component will render a button that allows the user to view their profile.

Step 5: Building and Running the Tauri Application

Now that we have set up basic authentication in our Tauri application using Clerk, we can build and run the application. You can build the Tauri application by running the following command at the root of your project:

pnpm tauri dev

This will build and the Tauri application. You should see the authentication flow provided by Clerk in your Tauri application. You can sign in, sign out, and view your profile using the Clerk SDK components we added to the React component.

In this blog post, we have walked through the steps involved in setting up basic authentication in a Tauri application using Clerk. We have configured the Clerk SDK in the React portion of the Tauri application, handled user authentication, and built and run the application. You can now integrate Clerk’s authentication system into your Tauri application and provide a secure and scalable authentication solution for your users.

See the next blog Post later this week for a breakdown of the react portion of the application and how I used react router dom to handle routing in the application. I will also go over passing the user context from Clerk to the Rust portion of the application.