Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Clerk Authentication #14

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add Clerk Authentication #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import type { Metadata } from "next";
import PlausibleProvider from "next-plausible";
import localFont from "next/font/local";
import "./globals.css";
import { ClerkProvider} from '@clerk/nextjs'

const geistSans = localFont({
src: "./fonts/GeistVF.woff",
Expand Down Expand Up @@ -50,7 +51,8 @@ export default function RootLayout({
children: React.ReactNode;
}>) {
return (
<html lang="en" className="h-full">
<ClerkProvider>
<html lang="en" className="h-full">
<head>
<meta name="color-scheme" content="dark" />
<PlausibleProvider domain="blinkshot.io" />
Expand All @@ -62,5 +64,6 @@ export default function RootLayout({
<Providers>{children}</Providers>
</body>
</html>
</ClerkProvider>
);
}
23 changes: 21 additions & 2 deletions app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,16 @@ import { useQuery } from "@tanstack/react-query";
import { useDebounce } from "@uidotdev/usehooks";
import Image from "next/image";
import { useEffect, useState } from "react";

import { useUser, useClerk, UserButton,} from "@clerk/nextjs";
type ImageResponse = {
b64_json: string;
timings: { inference: number };
};

export default function Home() {

const { user } = useUser();
const {openSignIn } = useClerk();
const [prompt, setPrompt] = useState("");
const [iterativeMode, setIterativeMode] = useState(false);
const [userAPIKey, setUserAPIKey] = useState("");
Expand Down Expand Up @@ -71,6 +74,17 @@ export default function Home() {
<Logo />
</a>
</div>
<div className=" flex flex-col items-center justify-center mr-2">
{
user ? (
<UserButton/>
) : (
<button onClick={()=>openSignIn({})} className=' bg-zinc-600 items-center flex gap-4 sm:px-8 sm:py-3 px-4 py-2 text-sm rounded-full text-white '>
Get Start
</button>
)
}
</div>
<div>
<label className="text-xs text-gray-200">
[Optional] Add your{" "}
Expand All @@ -92,7 +106,9 @@ export default function Home() {
</div>
</header>

<div className="flex justify-center">
{
user && (
<div className="flex justify-center">
<form className="mt-10 w-full max-w-lg">
<fieldset>
<div className="relative">
Expand Down Expand Up @@ -127,6 +143,9 @@ export default function Home() {
</fieldset>
</form>
</div>
)
}


<div className="flex w-full grow flex-col items-center justify-center pb-8 pt-4 text-center">
{!activeImage || !prompt ? (
Expand Down
35 changes: 25 additions & 10 deletions middleware.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,33 @@
/* eslint-disable @typescript-eslint/no-unused-vars */
import { NextRequest, NextResponse } from "next/server";
import { clerkMiddleware,createRouteMatcher } from "@clerk/nextjs/server";
// export async function middleware(req: NextRequest) {

export async function middleware(req: NextRequest) {
let country = req.geo?.country;
// Temporarily blocking traffic from Russia since I have too many requests from there.
if (country === "RU") {
return new NextResponse("Access Denied", { status: 403 });
}

// Allow the request to proceed
return NextResponse.next();
}



// let country = req.geo?.country;
// console.log(`Country: ${country}`);
// // Temporarily blocking traffic from Russia since I have too many requests from there.
// if (country === "RU") {
// return new NextResponse("Access Denied", { status: 403 });
// }

// // Allow the request to proceed
// return NextResponse.next();
// }

// Optionally, specify paths to apply the middleware

export default clerkMiddleware(

)
export const config = {
matcher: "/:path*", // Apply to all routes
matcher:[
// Skip Next.js internals and all static files, unless found in search params
'/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
// Always run for API routes
'/(api|trpc)(.*)',
],
};
Loading