Skip to content

Commit

Permalink
add auth with next-auth and neon
Browse files Browse the repository at this point in the history
  • Loading branch information
Nutlope committed Mar 9, 2023
1 parent 792b4e6 commit e48270e
Showing 14 changed files with 922 additions and 90 deletions.
8 changes: 8 additions & 0 deletions .example.env
Original file line number Diff line number Diff line change
@@ -6,3 +6,11 @@ UPSTASH_REDIS_REST_TOKEN=

# Optional, if you're planning to use Upload.io (you need to if you have 100+ uploads)
NEXT_PUBLIC_UPLOAD_API_KEY=

# Optional, if you want to add auth + DB
NEXTAUTH_SECRET=
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
DATABASE_URL=
SHADOW_DATABASE_URL=
NEXTAUTH_URL=
5 changes: 5 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -42,6 +42,11 @@ Then, run the application in the command line and it will be available at `http:
npm run dev
```

## Auth setup

1. Use `openssl rand -base64 32` to generate NEXTAUTH_SECRET
2. Add DB URL and SHADOW DB URL from Neon

## One-Click Deploy

Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=vercel-examples):
30 changes: 20 additions & 10 deletions components/Header.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import Image from "next/image";
import Link from "next/link";

export default function Header() {
export default function Header({ photo }: { photo?: string }) {
return (
<header className="flex flex-col xs:flex-row justify-between items-center w-full mt-3 border-b pb-7 sm:px-4 px-2 border-gray-500 gap-2">
<Link href="/" className="flex space-x-2">
@@ -16,15 +16,25 @@ export default function Header() {
roomGPT.io
</h1>
</Link>
<a
className="flex max-w-fit items-center justify-center space-x-2 rounded-full border border-blue-600 text-white px-5 py-2 text-sm shadow-md hover:bg-blue-500 bg-blue-600 font-medium transition"
href="https://github.com/Nutlope/roomGPT"
target="_blank"
rel="noopener noreferrer"
>
<Github />
<p>Star on GitHub</p>
</a>
{photo ? (
<Image
alt="Profile picture"
src={photo}
className="w-10 rounded-full"
width={32}
height={28}
/>
) : (
<a
className="flex max-w-fit items-center justify-center space-x-2 rounded-full border border-blue-600 text-white px-5 py-2 text-sm shadow-md hover:bg-blue-500 bg-blue-600 font-medium transition"
href="https://github.com/Nutlope/roomGPT"
target="_blank"
rel="noopener noreferrer"
>
<Github />
<p>Star on GitHub</p>
</a>
)}
</header>
);
}
10 changes: 10 additions & 0 deletions lib/prismadb.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { PrismaClient } from "@prisma/client";

declare global {
var prisma: PrismaClient | undefined;
}

const client = globalThis.prisma || new PrismaClient();
if (process.env.NODE_ENV !== "production") globalThis.prisma = client;

export default client;
2 changes: 1 addition & 1 deletion next.config.js
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@
module.exports = {
reactStrictMode: true,
images: {
domains: ["upcdn.io", "replicate.delivery"],
domains: ["upcdn.io", "replicate.delivery", "lh3.googleusercontent.com"],
},
async redirects() {
return [
Loading

0 comments on commit e48270e

Please sign in to comment.