T3 Turbo x Supabase

Installation

There are two ways of initializing an app using create-t3-turbo starter. You can either use this repository as a template or use Turbo's CLI to init your project:

npx create-turbo@latest -e https://github.com/t3-oss/create-t3-turbo

About

This is an extended version of create-t3-turbo implementing authentication using Supabase Auth on both the web and mobile applications.

Side note for mobile

iOS: One of the requirements for Apple's review process requires you to implement native Sign in with Apple if you're providing any other third party authentication method. Read more in Section 4.8 - Design: Sign in with Apple.

We have preconfigured this for you which you can find here. All you need to do is to enable the Apple Provider in your Supabase dashboard and fill in your information.

In this template, we use @acme as a placeholder for package names. As a user, you might want to replace it with your own organization or project name. You can use find-and-replace to change all the instances of @acme/ to something like @my-company/ / @project-name/.

FAQ

We currently only supports Sign in with Apple - support for more providers on mobile are being worked on!

Can you include Solito?

No. Solito will not be included in this repo. It is a great tool if you want to share code between your Next.js and Expo app. However, the main purpose of this repo is not the integration between Next.js and Expo - it's the codesplitting of your T3 App into a monorepo, the Expo app is just a bonus example of how you can utilize the monorepo with multiple apps but can just as well be any app such as Vite, Electron, etc.

Integrating Solito into this repo isn't hard, and there are a few offical templates by the creators of Solito that you can use as a reference.

Does this pattern leak backend code to my client applications?

No, it does not. The api package should only be a production dependency in the Next.js application where it's served. The Expo app, and all other apps you may add in the future, should only add the api package as a dev dependency. This lets you have full typesafety in your client applications, while keeping your backend code safe.

If you need to share runtime code between the client and server, such as input validation schemas, you can create a separate shared package for this and import on both sides.

Quick Start

To get it running, follow the steps below:

Setup dependencies

# Install dependencies
pnpm i

# Configure environment variables.
# There is an `.env.example` in the root directory you can use for reference
cp .env.example .env

# Push the Prisma schema to your database
# Can't run with Turbo as we need an interactive shell (see below why)
# Consequent runs you may simply do `pnpm db:push` from root.
pnpm -F db db:push

When running the last command, pnpm -F db db:push, you'll get a warning for adding a unique constraint on the schema-migrations model. This is because Supabase doesn't include this by default, but Prisma requires each model to have at least one unique column. You can safely accept this warning and add the unique constraint on the table.

Setting up Supabase

1. Go to the Supabase dashboard and create a new project.
2. Under project settings, retrieve the environment variables reference id, project url & anon public key and paste them into .env in the necessary places. You'll also need the database password you set when creating the project.
3. Under Auth, configure any auth provider(s) of your choice. This repo is using Github for Web and Apple for Mobile.
4. You'll also need to copy-paste the project url and anon key into Expo app config.

By default, Supabase exposes the public schema to the PostgREST API to allow the supabase-js client query the database directly from the client. However, since we route all our requests through the Next.js application (through tRPC), we don't want our client to have this access. To disable this, execute the following SQL query in the SQL Editor on your Supabase dashboard:

REVOKE USAGE ON SCHEMA public FROM anon, authenticated;

Note: This means you also don't need to enable row-level security (RLS) on your database if you don't want to.

Configure Expo dev-script

Use iOS Simulator

1. Make sure you have XCode and XCommand Line Tools installed as shown on expo docs.

   NOTE: If you just installed XCode, or if you have updated it, you need to open the simulator manually once. Run npx expo start in the root dir, and then enter I to launch Expo Go. After the manual launch, you can run pnpm dev in the root directory.

+  "dev": "expo start --ios",

3. Run pnpm dev at the project root folder.

TIP: It might be easier to run each app in separate terminal windows so you get the logs from each app separately. This is also required if you want your terminals to be interactive, e.g. to access the Expo QR code. You can run pnpm --filter expo dev and pnpm --filter nextjs dev to run each app in a separate terminal window.

For Android

1. Install Android Studio tools as shown on expo docs.
2. Change the dev script at apps/expo/package.json to open the Android emulator.

+  "dev": "expo start --android",

3. Run pnpm dev at the project root folder.

References

• For more useful information on how to deploy this stack, refer to t3-oss/create-t3-turbo.
• Supabase Documentation
• This stack originates from create-t3-app.
• A blog post where I wrote how to migrate a T3 app into this.