jaaneek / t3-supabase-app-router Goto Github PK
View Code? Open in Web Editor NEWNextjs 14 APP Router, t3 stack, Supabase (Auth, storage, database)
Nextjs 14 APP Router, t3 stack, Supabase (Auth, storage, database)
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);
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.
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.
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:
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.
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.