32 |
33 |
36 |
89 | or
34 |
35 |
32 |
33 |
36 |
37 |
88 | or
34 |
35 |
37 |
44 |
49 |
54 |
55 | );
56 | };
57 |
--------------------------------------------------------------------------------
/src/app/(landing)/_components/copy-to-clipboard.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { Button } from "@/components/ui/button";
4 | import { Input } from "@/components/ui/input";
5 | import { cn } from "@/lib/utils";
6 | import { CheckIcon, CopyIcon } from "@radix-ui/react-icons";
7 | import { useState } from "react";
8 | import { toast } from "sonner";
9 |
10 | export const CopyToClipboard = ({ text }: { text: string }) => {
11 | const [copied, setCopied] = useState(false);
12 | const copyToClipboard = async () => {
13 | setCopied(true);
14 | setTimeout(() => {
15 | setCopied(false);
16 | }, 2000);
17 | await navigator.clipboard.writeText(text);
18 | toast("Copied to clipboard", {
19 | icon:
24 |
25 |
37 |
38 | );
39 | };
40 |
--------------------------------------------------------------------------------
/src/app/(landing)/_components/footer.tsx:
--------------------------------------------------------------------------------
1 | import { ThemeToggle } from "@/components/theme-toggle";
2 | import { CodeIcon } from "@radix-ui/react-icons";
3 |
4 | const githubUrl = "https://github.com/iamtouha/next-lucia-auth";
5 | const twitterUrl = "https://twitter.com/iamtouha";
6 |
7 | export const Footer = () => {
8 | return (
9 |
28 | );
29 | };
30 |
--------------------------------------------------------------------------------
/src/app/(landing)/_components/header.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 | import { RocketIcon } from "@/components/icons";
3 | import { APP_TITLE } from "@/lib/constants";
4 | import { Button } from "@/components/ui/button";
5 | import {
6 | DropdownMenu,
7 | DropdownMenuContent,
8 | DropdownMenuItem,
9 | DropdownMenuTrigger,
10 | } from "@/components/ui/dropdown-menu";
11 | import { HamburgerMenuIcon } from "@radix-ui/react-icons";
12 |
13 | const routes = [
14 | { name: "Home", href: "/" },
15 | { name: "Features", href: "/#features" },
16 | {
17 | name: "Documentation",
18 | href: "https://www.touha.dev/posts/simple-nextjs-t3-authentication-with-lucia",
19 | },
20 | ] as const;
21 |
22 | export const Header = () => {
23 | return (
24 |
26 |
27 |
28 |
35 |
36 |
37 |
45 |
46 |
50 |
69 |
38 | {routes.map(({ name, href }) => (
39 |
40 | {name}
41 |
42 | ))}
43 |
44 |
64 |
67 |
68 | {props.logo}
62 |
82 |
111 |
83 |
87 | 88 | Next.js Lucia Auth Starter Template 89 |
90 |91 | A Next.js Authentication starter template (password reset, email validation and oAuth). 92 | Includes Lucia, Drizzle, tRPC, Stripe, tailwindcss, shadcn-ui and react-email. 93 |
94 |
95 |
99 |
96 |
98 |
100 |
106 |
109 |
110 |
13 |
14 |
18 |
109 |
112 |
113 | Continue
114 |
115 |
116 |
17 |
20 |
6 | {Array.from({ length: 3 }).map((_, i) => (
7 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/src/app/(main)/dashboard/_components/posts.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { type RouterOutputs } from "@/trpc/shared";
4 | import * as React from "react";
5 | import { NewPost } from "./new-post";
6 | import { PostCard } from "./post-card";
7 |
8 | interface PostsProps {
9 | promises: Promise<[RouterOutputs["post"]["myPosts"], RouterOutputs["stripe"]["getPlan"]]>;
10 | }
11 |
12 | export function Posts({ promises }: PostsProps) {
13 | /**
14 | * use is a React Hook that lets you read the value of a resource like a Promise or context.
15 | * @see https://react.dev/reference/react/use
16 | */
17 | const [posts, subscriptionPlan] = React.use(promises);
18 |
19 | /**
20 | * useOptimistic is a React Hook that lets you show a different state while an async action is underway.
21 | * It accepts some state as an argument and returns a copy of that state that can be different during the duration of an async action such as a network request.
22 | * @see https://react.dev/reference/react/useOptimistic
23 | */
24 | const [optimisticPosts, setOptimisticPosts] = React.useOptimistic(
25 | posts,
26 | (
27 | state,
28 | {
29 | action,
30 | post,
31 | }: {
32 | action: "add" | "delete" | "update";
33 | post: RouterOutputs["post"]["myPosts"][number];
34 | },
35 | ) => {
36 | switch (action) {
37 | case "delete":
38 | return state.filter((p) => p.id !== post.id);
39 | case "update":
40 | return state.map((p) => (p.id === post.id ? post : p));
41 | default:
42 | return [...state, post];
43 | }
44 | },
45 | );
46 |
47 | return (
48 |
49 |
57 | );
58 | }
59 |
--------------------------------------------------------------------------------
/src/app/(main)/dashboard/_components/verificiation-warning.tsx:
--------------------------------------------------------------------------------
1 | import { ExclamationTriangleIcon } from "@/components/icons";
2 |
3 | import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
4 | import { Button } from "@/components/ui/button";
5 | import { validateRequest } from "@/lib/auth/validate-request";
6 | import Link from "next/link";
7 |
8 | export async function VerificiationWarning() {
9 | const { user } = await validateRequest();
10 |
11 | return user?.emailVerified === false ? (
12 |
15 |
26 |
16 | Account verification required
17 |
18 | A verification email has been sent to your email address. Please verify your account to
19 | access all features.
20 |
21 |
22 |
25 |
23 | {Array.from({ length: 2 }).map((_, i) => (
24 |
30 |
25 |
28 | ))}
29 | {plan?.name ?? "Free"} plan
32 |33 | {!plan?.isPro 34 | ? "The free plan is limited to 2 posts. Upgrade to the Pro plan to unlock unlimited posts." 35 | : plan.isCanceled 36 | ? "Your plan will be canceled on " 37 | : "Your plan renews on "} 38 | {plan?.stripeCurrentPeriodEnd ? formatDate(plan.stripeCurrentPeriodEnd) : null} 39 |
40 |
51 | {item.price}
52 | /month
53 |
54 |
55 | {item.features.map((feature) => (
56 |
64 |
57 |
62 | ))}
63 |
58 |
59 |
60 | {feature}
61 |
32 |
37 |
38 | This is a demo app.
40 |
41 | {APP_TITLE} app is a demo app using a Stripe test environment. You can find a list of
42 | test card numbers on the{" "}
43 |
49 | Stripe docs
50 |
51 | .
52 |
53 |
54 |
55 |
59 | );
60 | }
61 |
--------------------------------------------------------------------------------
/src/app/(main)/dashboard/layout.tsx:
--------------------------------------------------------------------------------
1 | import { DashboardNav } from "./_components/dashboard-nav";
2 | import { VerificiationWarning } from "./_components/verificiation-warning";
3 |
4 | interface Props {
5 | children: React.ReactNode;
6 | }
7 |
8 | export default function DashboardLayout({ children }: Props) {
9 | return (
10 |
33 |
36 | Billing
34 |Manage your billing and subscription
35 |
11 |
19 | );
20 | }
21 |
--------------------------------------------------------------------------------
/src/app/(main)/dashboard/page.tsx:
--------------------------------------------------------------------------------
1 | import { env } from "@/env";
2 | import { validateRequest } from "@/lib/auth/validate-request";
3 | import { Paths } from "@/lib/constants";
4 | import { myPostsSchema } from "@/server/api/routers/post/post.input";
5 | import { api } from "@/trpc/server";
6 | import { type Metadata } from "next";
7 | import { redirect } from "next/navigation";
8 | import * as React from "react";
9 | import { Posts } from "./_components/posts";
10 | import { PostsSkeleton } from "./_components/posts-skeleton";
11 |
12 | export const metadata: Metadata = {
13 | metadataBase: new URL(env.NEXT_PUBLIC_APP_URL),
14 | title: "Posts",
15 | description: "Manage your posts here",
16 | };
17 |
18 | interface Props {
19 | searchParams: Record
12 |
14 |
17 |
18 | {children}
16 |
41 |
49 | );
50 | }
51 |
--------------------------------------------------------------------------------
/src/app/(main)/dashboard/settings/page.tsx:
--------------------------------------------------------------------------------
1 | import type { Metadata } from "next";
2 | import { redirect } from "next/navigation";
3 |
4 | import { env } from "@/env";
5 | import { validateRequest } from "@/lib/auth/validate-request";
6 |
7 | export const metadata: Metadata = {
8 | metadataBase: new URL(env.NEXT_PUBLIC_APP_URL),
9 | title: "Billing",
10 | description: "Manage your billing and subscription",
11 | };
12 |
13 | export default async function BillingPage() {
14 | const { user } = await validateRequest();
15 |
16 | if (!user) {
17 | redirect("/signin");
18 | }
19 |
20 | return (
21 |
42 |
45 | Posts
43 |Manage your posts here
44 |
22 |
28 | );
29 | }
30 |
--------------------------------------------------------------------------------
/src/app/(main)/editor/[postId]/_components/post-editor.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { useRef } from "react";
3 | import { type RouterOutputs } from "@/trpc/shared";
4 | import { useForm } from "react-hook-form";
5 | import { zodResolver } from "@hookform/resolvers/zod";
6 | import {
7 | Form,
8 | FormControl,
9 | FormDescription,
10 | FormField,
11 | FormItem,
12 | FormLabel,
13 | FormMessage,
14 | } from "@/components/ui/form";
15 | import { Input } from "@/components/ui/input";
16 | import { Textarea } from "@/components/ui/textarea";
17 | import { PostPreview } from "./post-preview";
18 | import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
19 | import { api } from "@/trpc/react";
20 | import { Pencil2Icon } from "@/components/icons";
21 | import { LoadingButton } from "@/components/loading-button";
22 | import Link from "next/link";
23 | import { createPostSchema } from "@/server/api/routers/post/post.input";
24 |
25 | const markdownlink = "https://remarkjs.github.io/react-markdown/";
26 |
27 | interface Props {
28 | post: RouterOutputs["post"]["get"];
29 | }
30 |
31 | export const PostEditor = ({ post }: Props) => {
32 | if (!post) return null;
33 | const formRef = useRef
23 |
26 | Settings
24 |Manage your account settings
25 |Work in progress...
27 |
50 | formRef.current?.requestSubmit()}
57 | className="ml-auto"
58 | >
59 | Save
60 |
61 |
62 |
63 |
124 |
125 |
126 | );
127 | };
128 |
--------------------------------------------------------------------------------
/src/app/(main)/editor/[postId]/_components/post-preview.tsx:
--------------------------------------------------------------------------------
1 | import Markdown, { type Components } from "react-markdown";
2 | import remarkGfm from "remark-gfm";
3 | import rehypeRaw from "rehype-raw";
4 | import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
5 | import { materialOceanic } from "react-syntax-highlighter/dist/cjs/styles/prism";
6 |
7 | const options: Components = {
8 | code: (props) => (
9 | {post.title}
52 | 53 |
25 |
39 |
40 | ),
41 | // ImageResponse options
42 | {
43 | // For convenience, we can re-use the exported icons size metadata
44 | // config to also set the ImageResponse's width and height.
45 | ...size,
46 | },
47 | );
48 | }
49 |
--------------------------------------------------------------------------------
/src/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import "@/styles/globals.css";
2 |
3 | import { ThemeProvider } from "@/components/theme-provider";
4 | import { Toaster } from "@/components/ui/sonner";
5 | import { APP_TITLE } from "@/lib/constants";
6 | import { fontSans } from "@/lib/fonts";
7 | import { cn } from "@/lib/utils";
8 | import { TRPCReactProvider } from "@/trpc/react";
9 | import type { Metadata, Viewport } from "next";
10 |
11 | export const metadata: Metadata = {
12 | title: {
13 | default: APP_TITLE,
14 | template: `%s | ${APP_TITLE}`,
15 | },
16 | description: "Acme - Simple auth with lucia and trpc",
17 | icons: [{ rel: "icon", url: "/icon.png" }],
18 | };
19 |
20 | export const viewport: Viewport = {
21 | themeColor: [
22 | { media: "(prefers-color-scheme: light)", color: "white" },
23 | { media: "(prefers-color-scheme: dark)", color: "black" },
24 | ],
25 | };
26 |
27 | export default function RootLayout({
28 | children,
29 | }: {
30 | children: React.ReactNode;
31 | }) {
32 | return (
33 |
34 |
40 |
16 |
22 |
39 |
40 | );
41 | },
42 | );
43 | PasswordInputComponent.displayName = "PasswordInput";
44 |
45 | export const PasswordInput = PasswordInputComponent;
46 |
--------------------------------------------------------------------------------
/src/components/responsive-dialog.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import {
4 | useState,
5 | type ReactNode,
6 | type Dispatch,
7 | type SetStateAction,
8 | } from "react";
9 | import { Button } from "@/components/ui/button";
10 | import {
11 | Dialog,
12 | DialogTitle,
13 | DialogContent,
14 | DialogDescription,
15 | DialogHeader,
16 | DialogTrigger,
17 | DialogFooter,
18 | } from "@/components/ui/dialog";
19 | import {
20 | Drawer,
21 | DrawerClose,
22 | DrawerContent,
23 | DrawerDescription,
24 | DrawerFooter,
25 | DrawerHeader,
26 | DrawerTitle,
27 | DrawerTrigger,
28 | } from "@/components/ui/drawer";
29 | import { useMediaQuery } from "@/lib/hooks/use-media-query";
30 | import { cn } from "@/lib/utils";
31 |
32 | type StatefulContent = ({
33 | open,
34 | setOpen,
35 | }: {
36 | open: boolean;
37 | setOpen: Dispatch
74 | {isFunctionType(props.children)
75 | ? props.children({ open, setOpen })
76 | : props.children}
77 |
78 | 162 | {body} 163 |
164 | ); 165 | }); 166 | FormMessage.displayName = "FormMessage"; 167 | 168 | export { 169 | useFormField, 170 | Form, 171 | FormItem, 172 | FormLabel, 173 | FormControl, 174 | FormDescription, 175 | FormMessage, 176 | FormField, 177 | }; 178 | -------------------------------------------------------------------------------- /src/components/ui/input.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | 3 | import { cn } from "@/lib/utils" 4 | 5 | export interface InputProps 6 | extends React.InputHTMLAttributes