bartvdbraak/omnidash
1
0
Fork 0
mirror of https://github.com/bartvdbraak/omnidash.git synced 2025-05-07 04:01:21 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat: Revamped Authentication layer with Clerk

Browse source
This commit is contained in:
Bart van der Braak 2023-06-13 00:09:59 +02:00
parent 64179b81cc
commit db122bcf59
6 changed files with 53 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
.env.example
View file

@ -1,2 +1,6 @@
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY= NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY= CLERK_SECRET_KEY=
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/overview
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/overview

30
app/(authenticated)/layout.tsx
View file

@ -1,31 +1,3 @@
import { Particles } from "@/components/landing/particles";
import {
ClerkProvider,
SignIn,
SignedIn,
SignedOut,
} from "@clerk/nextjs/app-beta";
export default function AppLayout({ children }: { children: React.ReactNode }) { export default function AppLayout({ children }: { children: React.ReactNode }) {
return ( return children;
<ClerkProvider>
<SignedIn>{children}</SignedIn>
<SignedOut>
<div className="flex items-center justify-center w-screen h-screen">
<Particles className="absolute inset-0 -z-10 " />
<SignIn
appearance={{
variables: {
colorPrimary: "#161616",
colorText: "#161616",
},
}}
afterSignInUrl={"/overview"}
afterSignUpUrl={"/overview"}
/>
</div>
</SignedOut>
</ClerkProvider>
);
} }

7
app/layout.tsx
View file

@ -6,6 +6,7 @@ import "tailwindcss/tailwind.css";
import { ToastProvider } from "../toast-provider"; import { ToastProvider } from "../toast-provider";
import { Metadata } from "next"; import { Metadata } from "next";
import { ClerkProvider } from "@clerk/nextjs/app-beta";
export const metadata: Metadata = { export const metadata: Metadata = {
title: { title: {
@ -67,11 +68,15 @@ export default async function RootLayout({ children }: RootLayoutProps) {
suppressHydrationWarning suppressHydrationWarning
className={[inter.variable, calSans.variable].join(" ")} className={[inter.variable, calSans.variable].join(" ")}
> >
<head /> <head>
<meta charSet="utf-8"></meta>
</head>
<body className="min-h-screen antialiased"> <body className="min-h-screen antialiased">
<ClerkProvider>
<ThemeProvider attribute="class" defaultTheme="dark" enableSystem> <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
<ToastProvider>{children}</ToastProvider> <ToastProvider>{children}</ToastProvider>
</ThemeProvider> </ThemeProvider>
</ClerkProvider>
</body> </body>
</html> </html>
</> </>

19
app/sign-in/[[...sign-in]]/page.tsx Normal file
View file

@ -0,0 +1,19 @@
import { Particles } from "@/components/landing/particles";
import { SignIn } from "@clerk/nextjs/app-beta";
export default function Page() {
return (
<div className="flex items-center justify-center w-screen h-screen">
<Particles className="absolute inset-0 -z-10 " />
<SignIn
appearance={{
variables: {
colorPrimary: "#161616",
colorText: "#161616",
},
}}
/>
</div>
);
}

19
app/sign-up/[[...sign-up]]/page.tsx Normal file
View file

@ -0,0 +1,19 @@
import { Particles } from "@/components/landing/particles";
import { SignUp } from "@clerk/nextjs/app-beta";
export default function Page() {
return (
<div className="flex items-center justify-center w-screen h-screen">
<Particles className="absolute inset-0 -z-10 " />
<SignUp
appearance={{
variables: {
colorPrimary: "#161616",
colorText: "#161616",
},
}}
/>
</div>
);
}

2
components/landing/ui/header.tsx
View file

@ -17,7 +17,7 @@ export const Header: React.FC = () => {
<li> <li>
<Link <Link
className="text-sm font-medium text-zinc-300 hover:text-white duration-500" className="text-sm font-medium text-zinc-300 hover:text-white duration-500"
href="/overview" href="/sign-in"
> >
Sign in Sign in
</Link> </Link>