The cross-platform capabilities of React Native combined with Expo's development tools have transformed how developers approach mobile app creation. Add Clerk's user management and Supabase's powerful backend, and you have a complete toolkit for building production-ready apps that deploy everywhere.
In this tutorial, you'll learn how to create a time tracking app called Aika from scratch. You'll create this app with React Native and Expo, implement secure authentication with Clerk, and set up data storage using Supabase. By the end of this guide, you'll have built a fully functional, cross-platform time tracking app that works on both iOS and Android devices.
When building any application, you'll face the challenge of implementing secure authentication. Clerk goes beyond just authentication and provides a complete user management solution that's both secure and easy to implement.
With Clerk, you'll save hours of development time as it handles everything from sign-up and sign-in flows to session management and user profiles. You can easily implement multiple authentication methods including email/password, OAuth providers like Google and Apple, email codes, passkeys, and more.
In this guide, you'll implement email/password and Google authentication, giving your users flexibility in how they access the application.
If you are building an application that requires teams and collaboration, you'll appreciate Clerk's multi-tenancy features and role-based access control. Our B2B tools allow developers to enable users to create their own teams, invite others to join, and assign roles to users within their teams.
Clerk has a number of additional security features built into every application created on our platform. These include features like device management and bot detection, which are crucial for maintaining the security of user accounts without requiring you to implement these protections yourself. You can also easily protect against platform abuse by preventing the use of email subaddresses, such as user+tag@example.com, which are often used to bypass free tier limits. Finally, Clerk automatically checks all credentials against a list of known breached credentials to prevent account takeover attacks.
This is not a complete list of the security features we offer, and you can learn more on our Authentication page.
For data storage, you'll use Supabase, an open-source Firebase alternative that provides a powerful Postgres database with a simple API.
With Supabase, you'll harness the power of a full PostgreSQL database without setting up and maintaining your own server infrastructure. While you can execute SQL queries against the database just like any other, Supabase also provides the Data API, which allows you to access the database from your application using a simple API protected by Row Level Security (RLS), ensuring data is only accessible to the correct users.
One of the most compelling reasons to use Supabase with Clerk is our seamless integration. You'll configure RLS policies to work with Clerk's JWT tokens, requiring users to be authenticated before accessing data belonging to those users. This creates a secure, scalable system with minimal backend code, saving you time and reducing potential security vulnerabilities. Learn more in our Supabase integration guide.
When working with Supabase, you'll appreciate its clean, intuitive dashboard for managing your database, along with comprehensive documentation. Supabase also has excellent client libraries and developer tooling, making it easy to apply schema changes and deploy changes to your Supabase project from your workstation. This allows you to focus on building features rather than configuring infrastructure.
Now that you understand why we're using Clerk and Supabase, let's build the Aika time tracking app from scratch. Follow these steps carefully to create your own fully functional time tracking application.
Before following along, make sure you have the following:
A completed version of this project can be found on GitHub.
Start by creating a new Clerk application in the Clerk dashboard. Name your application "Aika" and leave the sign in options as default.
The next page will show the onboarding screen for Clerk, along with a selectable list of the most popular frameworks. Select Expo from the list, copy the API keys from step 2, and set them aside for later use.
Now head over to the Supabase dashboard and create a new project. Name it "Aika", select Generate a password in the Database Password section, and then Create new project. Make sure to copy the password for later use.
Navigate to the Authentication section in the left sidebar, and then select Sign in / Providers, then Third Party Auth. Select Clerk from the list of providers to open a modal to configure the integration.
In the modal, select Clerk's Connect with Supabase page to open the integration wizard in the Clerk dashboard.
In the wizard, ensure the correct organization, application, and instance are selected. Select Activate Supabase integration, then copy the value in the Clerk domain field. This will be used in the next step.
Once copied, go back to the Supabase dashboard, paste the value into the modal, and select Create connection.
Next, navigate to Project Settings > Data API and note the Project URL for later.
Then navigate to the API Keys node and copy the anon key. This will be used in the next step.
Both Clerk and Supabase are now configured, and you can start building Aika.
Now, you'll create a new Expo project using the latest version of the Expo SDK. Expo provides an excellent development experience for React Native with features like hot reloading, easy access to native APIs, and simplified deployment.
Open your terminal and run these commands:
You should see the Expo development server running and options to open your app on iOS, Android, or web. For this guide, you'll be using the web version of the app, which can be accessed by tapping w in the terminal.
Now stop the development server by pressing Ctrl + C in the terminal and run the following command to install the Clerk and Supabase SDKs along with their peer dependencies:
Create a .env file in your project root to store the Clerk and Supabase API keys:
To use the Clerk SDK, you need to wrap the entire application in the ClerkProvider component, which provides access to all of the necessary control components and helper functions. Update app/_layout.tsx to wrap the application in a ClerkProvider:
Now you'll need to configure the authentication pages as well as a protected area of the application that requires users to be signed in before they can access it. Start by creating a new folder called app/(tabs)/protected and move all of the files from app/(tabs) into it. The updated file structure should look like this:
Create a new layout file at app/(tabs)/_layout.tsx to wrap the protected routes in a Stack.Protected component. The Clerk SDK will be used to determine if the user is signed in and redirect them to the appropriate screen:
Create the constants/AuthStyles.ts file to export styles that will be shared across the authentication pages, making the code cleaner:
To support OAuth, you'll use a dedicated OAuthButton component that can accept one of the many providers that Clerk supports. Create components/OAuthButton.tsx:
Now you'll configure the sign-in and sign-up screens at app/(tabs)/index.tsx and app/(tabs)/sign-up.tsx respectively. This will ensure that the first screen a user sees when they access the application is the sign-in form.
Create app/(tabs)/index.tsx:
The sign-up screen is similar to the sign-in screen but contains additional logic to handle verifying a new user account by requesting the six-digit code that is sent to their email address.
Create the app/(tabs)/sign-up.tsx file:
Authentication should be fully configured at this point. Start the development server by running the following command in your terminal:
Press w with the terminal focused to open the web version of your app again and test creating an account and signing in. Once signed in, you should be redirected to the protected screen, which is the same as the home screen from before since we moved those screens into the protected folder.
Now that Clerk is configured, you'll need to configure Supabase to work with Clerk. Start by running the following commands in your terminal to initialize Supabase in the repository and link it to the application you created earlier:
Now run the following command to create a new database migration which will be used to store timer history:
A new file will be created at supabase/migrations with a timestamp and the name timer_entries. In the migration file, you'll define the table, enable RLS, and configure the necessary RLS policies to parse the JWT token and extract the Clerk user ID from the sub claim, associating that record to the user who created it.
Open the file and add the following SQL:
Now run the following command to apply the migration. Paste in the database password from when you created your Supabase project if prompted.
Next you'll configure a custom Supabase client that accepts a Promise<string | null> as an argument, which will be used to set the access token for the Supabase client allowing Clerk to manage the session. Create the utils/supabase.ts file which exports this client:
Now you can start implementing the core logic for the timer and history.
There are a few components that will be needed to implement this functionality. The below image contains annotated screenshots of the final implementation of the home screen, with the left image showing the timer running and the right image showing it stopped:
The timer component is shown when the user has an active timer and lets them stop the timer when they are finished doing the work. Create components/TimerCounter.tsx and paste in the following code:
The TimerInputForm.tsx component lets the user input a description for the timer and start it. Create components/TimerInputForm.tsx and paste in the following code:
The TimeEntryItem.tsx component displays a single time entry and is used in a FlatList component which allows rendering a list of time entries and making it scrollable. This component also has a modal that allows the user to edit or delete the time entry. Create components/TimeEntryItem.tsx and paste in the following code:
All three of these components are then used in app/(tabs)/protected/index.tsx to display the timer, history, and settings. The logic to run operations against Supabase is also implemented in that file and leveraged from the child components.
Update app/(tabs)/protected/index.tsx and replace all of the code with what's below:
Now access the application in your browser again and test out the timer functionality! You can also check the database to see the time entries being added:
The last thing you'll build in this demo is a simple settings screen that will display information about the currently logged in user and provide a method of signing out. Two helper functions from the Clerk SDK will be used: the useUser hook to get the currently logged in user and the useAuth hook to access the function required to sign out.
Create the app/(tabs)/protected/settings.tsx file and add the following code:
Expo will automatically add the new screen to the bottom tab bar so you can access it but the icon will not be present since it needs to be set in the layout file for the protected routes. Update app/(tabs)/protected/_layout.tsx to specify the configuration for that bar:
You'll also need to map the gear icon in the IconSymbol component so it displays in the tab bar:
Finally, delete the app/(tabs)/protected/explore.tsx screen since it's no longer used.
You've successfully built a fully functional time tracking app using React Native, Expo, Clerk, and Supabase. Through this article, you've learned how to implement secure authentication with Clerk, set up a Supabase database with proper security using Row Level Security that integrates with Clerk, and build a timer interface that allows users to track their time.
The combination of React Native, Expo, Clerk, and Supabase provides a solid foundation for building secure, scalable applications that can grow with your needs. In the next article, we'll explore how to easily add multitenancy with Clerk's B2B tools, making Aika a suitable option for teams and organizations looking to track time for their employees!
Updated February 12, 2026
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。