markobozic346 / next-13-app-trpc-drizzle-next-auth

fullstack role based auth app built with Next.js 13 app dir, TRPC, shadcn UI, next-auth, drizzle ORM, sqLite,

Next 13, TRPC, Drizzle, Next-Auth

⚠️ THIS PROJECT IS IN ACTIVE DEVELOPMENT !!

Inspired by T3 stack and Jack Harrington video, this is a role-based auth todo app.

Features

• Auth - Discord
• Roles - Admin and User, the admin can delete or update all todos, user can manipulate only his todos.
• User and Admin panel - each user has dedicated panel with actions

Tech features

• Next.js 13 app dir
• tRPC
• Drizzle ORM with SQLite
• Next-Auth Discord Provider
• UI Shadcn UI
• Roles Admin and User

Try yourself

First, git clone the repository and install dependencies

npm install
# or
yarn

Setup env

Add .env file to the root of the app, and fill env variables

DISCORD_CLIENT_ID=
DISCORD_CLIENT_SECRET=

NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=

for more details about setting env variables check:

• Discord oAuth2 docs
• next-auth url
• next-auth secret

Run the app

Then run the database generation command:

yarn drizzle-kit generate:sqlite

And run the development server

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

Usage

Change role

for role change in development env use drizzle studio:

yarn drizzle-kit studio

navigate to provided URL from CLI, select the user table on the UI, select the user, and change role to either ADMIN or USER

Client fetching

'use client'

import { trpc } from "@/app/_trpc/client";

function ClientComponent(){

    const { data } = trpc.todo.getUserTodos.useQuery()

    return (
        ...
    )
}

Server fetching

import { serverClient } from "@/app/_trpc/serverClient";

async function ServerComponent() {
  const trpcClient = await serverClient();

  const data = await trpcClient.todo.getUserTodos();

return  (
    ...
)
}

Routers

located in src/server/routers/root.ts

todoRouter - used for todo CRUD operations, with middleware protections and payload validation
userRouter - not used, added just for example

more about TRPC routers

Middlewares

located in src/server/trpc.ts

publicProcedure - no restriction
protectedProcedure- requires from user to be authenticated
protectedAdminProcedure - requires from user to be authenticated AND have an admin role

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation
• Learn Next.js
• tRPC Documentation
• Drizzle Documentation
• Next-Auth Documentation
• Shadcn UI

Preview live

Coming soon

Deploy on Vercel

Coming Soon