jaaneek / t3-supabase-app-router

Nextjs 14 APP Router, t3 stack, Supabase (Auth, storage, database)

T3 stack + Supabase + App directory

This project is Edge ready (Vercel Edge runtime)

This is a starter project/boilerplate to start out with:

• TRPC
• App directory/router
• Prisma
• Supabase (Auth, Storage, Serverless Queries)
• Tailwind
• Edge Ready
• Umami analytics

It allows us to call database in server components through supabase-js, for client component we are using trpc+prisma due to the superior DX

Projects using this starter

• PortfolioQuiz Website
• FreeLogo.dev Website
• FeastQR Repo Website
• Instagram Clone Repo Website

What's next? How do I make an app with this?

• Clone this project
• Run

pnpm install

• Copy the .env.example into .env and fill out the envs

Initial Setup

If you want to develop on local supabase instance, follow the steps below:

Then go to supabase/config.toml file and change your service name.

Start the database:

• supabase start
• pnpm prepare:local

If you want to develop on remote supabase instance, follow the steps below:

Connect supabase to remote instance:

• supabase link --project-ref <your_project_id>
• pnpm prepare:remote

Common steps

• Fill out environment variables
• Create Secrets on Github

If you want to create migrations by hand, go ahead and use this command:

• supabase migration new <migration_name>

Then go to supabase/migrations folder and add your SQL there.

If you want to make changes with studio, use

• pnpm db:diff <migration_name>

Run these initial commands

Every time you change something on local instance:

pnpm prepare:local

• If you develop on cloud supabase run:

pnpm prepare:remote

• Run the project

pnpm dev

If you are not familiar with the different technologies used in this project, please refer to the respective docs.

• Next.js app router
• Prisma
• Tailwind CSS
• tRPC
• Supabase

Authors

👤 Milosz Jankiewicz

• Twitter: @twitter.com/jaaneek/
• Github: @Jaaneek
• LinkedIn: @https://www.linkedin.com/in/jaaneek

👤 Jakub Czarnowski

• Twitter: @twitter.com/charnowsky/
• Github: @jakubczarnowski
• LinkedIn: @https://www.linkedin.com/in/czarnowskijakub/

Learn More

To learn more about the T3 Stack, take a look at the following resources:

• Documentation
• Learn the T3 Stack — Check out these awesome tutorials

You can check out the create-t3-app GitHub repository — your feedback and contributions are welcome!

How do I deploy this?

Follow deployment guides for Vercel, Netlify and Docker for more information.

t3-supabase-app-router's Issues

JWT expiration crashes app

Getting the following error when running the app with one of the authenticated "example" users after an unknown period of time:

⨯ node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@trpc/client/dist/TRPCClientError-0de4d231.mjs (37:15) @ TRPCClientError.from
 ⨯ TRPCClientError: invalid JWT: unable to parse or verify signature, token is expired by 50m57s
    at eval (./src/trpc/server.ts:67:98)
digest: "1906314787"
null

I would expect the user to be logged out instead of crashing the app.

Can you use this exclusively with the pages directory? Auth with pages directory?

Can you use the method from the repo below for signing in?

https://github.com/supabase-community/create-t3-turbo

Adding the code block below in the pages directory

import {
  createBrowserSupabaseClient,
  type Session,
} from "@supabase/auth-helpers-nextjs";

import "../styles/globals.css";
import { useState } from "react";
import type { AppProps } from "next/app";
import { SessionContextProvider } from "@supabase/auth-helpers-react";

import { api } from "~/utils/api";

function MyApp({
  Component,
  pageProps,
}: AppProps<{ initialSession: Session | null }>) {
  const [supabaseClient] = useState(() => createBrowserSupabaseClient());

  return (
    <SessionContextProvider
      supabaseClient={supabaseClient}
      initialSession={pageProps.initialSession}
    >
      <Component {...pageProps} />
    </SessionContextProvider>
  );
}

export default api.withTRPC(MyApp);

PrivateRoute base circumvents client side redirection

When navigating to a Private Route it checks for auth on the server and client side. The server side returns null to prevent the user from seeing the rendered component and the client side (withPrivateRoute) also checks to see if there is a user and, if not, redirects the user.

This is great but the server prevents withPrivateRoute from ever executing its redirect because it returns null before it ever has a chance to be run on the client.

The solution is to return null within the PrivateRouteBase instead of before it.

For example:

export const PrivateRoute = async ({ children }: PropsWithChildren) => {
  const user = await getServerUser()

  // prevent server side render of authorized page
  const view = !user ? null : children

  return <PrivateRouteBase>{view}</PrivateRouteBase>
}

This way null is rendered inside the PrivateRouteBase instead of before it, allowing for the redirect further down the process.

model Profiles is deleted following Initial Setup

Hello,

The Profiles model located in Prisma's schema is getting deleted while following the README's Initial Setup.

Seeing the comments, I have attempted to run the stored Supabase migration on a new Supabase project, attempting to then be able to follow the Initial Setup or even just db push without nuking the Profiles model, but with no success.

Either I'm being obtuse, or I suspect I won't be the only one getting blocked by this?

Any help would be greatly appreciated, thank you.

Supabase and Prisma not available upon fresh install

Running: pnpm run prepare:local right after install results in the following:

> pnpm update-types-local && pnpm prisma db pull && pnpm prisma generate && pnpm prisma-case-format --file prisma/schema.prisma  && pnpm prisma generate

[omitted superfluous output]

> supabase gen types typescript --local > src/server/supabase/supabaseTypes.ts

sh: supabase: command not found
 ELIFECYCLE  Command failed.
 ELIFECYCLE  Command failed with exit code 1.

I believe the issue is that my machine isn't configured to run prisma or supabase globally. I'd wager I'm probably not the first person to run into this. This can be resolved by calling on pnpx, pnpm's npx equivalent.

Errors when building

Thanks for putting together this repo! This is the exact stack I was looking for.

I just ran into some issues when first installing the deps:

Source (text)

pnpm install
 WARN  deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
Packages: +572
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Packages are hard linked from the content-addressable store to the virtual store.
  Content-addressable store is at: /Users/brandon.mcconnell/.pnpm-store/v3
  Virtual store is at:             node_modules/.pnpm
node_modules/.pnpm/[email protected]/node_modules/es5-ext: Running postinstall script, done in 74ms
node_modules/.pnpm/@[email protected]/node_modules/@prisma/engines: Running postinstall script, done in 174ms
node_modules/.pnpm/[email protected]/node_modules/bufferutil: Running install script, done in 1s
node_modules/.pnpm/[email protected]/node_modules/utf-8-validate: Running install script, done in 1.1s
Progress: resolved 580, reused 481, downloaded 91, added 572, done
node_modules/.pnpm/[email protected]/node_modules/prisma: Running preinstall script, done in 60ms
node_modules/.pnpm/@[email protected][email protected]/node_modules/@prisma/client: Running postinstall script, done in 516ms

> [email protected] postinstall /Users/brandon.mcconnell/Projects/XXXXXX
> prisma generate

Prisma schema loaded from prisma/schema.prisma
Error:
You don't have any models defined in your schema.prisma, so nothing will be generated.
You can define a model like this:

model User {
  id    Int     @id @default(autoincrement())
  email String  @unique
  name  String?
}

More information in our documentation:
https://pris.ly/d/prisma-schema

 ELIFECYCLE  Command failed with exit code 1.