Github auth

src/app/api/auth/callback/route.ts

@@ -0,0 +1,49 @@
+import axios from "axios";
+import { StatusCodes } from "http-status-codes";
+import { cookies } from "next/headers";
+import { NextResponse } from "next/server";
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const code = searchParams.get("code");
+
+  if (!code) {
+    return NextResponse.json(
+      { error: "No code provided" },
+      { status: StatusCodes.BAD_REQUEST }
+    );
+  }
+
+  try {
+    const response = await axios.post(
+      "https://github.com/login/oauth/access_token",
+      {
+        client_id: process.env.GITHUB_CLIENT_ID,
+        client_secret: process.env.GITHUB_CLIENT_SECRET,
+        code,
+      },
+      {
+        headers: {
+          Accept: "application/json",
+        },
+      }
+    );
+
+    const accessToken = response.data.access_token;
+
+    const c = await cookies();
+    c.set("github_access", accessToken, {
+      httpOnly: true,
+      path: "/",
+      secure: process.env.NODE_ENV === "production",
+    });
+
+    return NextResponse.redirect(new URL("/overview", request.url));
+  } catch (error) {
+    console.log(error);
+    return NextResponse.json(
+      { error: "Error exchanging code for access token" },
+      { status: StatusCodes.INTERNAL_SERVER_ERROR }
+    );
+  }
+}

src/app/page.tsx

@@ -2,16 +2,13 @@
 
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
+import redirectAuth from "@/core/auth/redirect";
 import Image from "next/image";
-import { useState } from "react";
 
 export default function LogIn() {
-  const [username, setUsername] = useState("");
-  const [password, setPassword] = useState("");
-
-  const logIn = async () => {};
+  const withGithub = () => {
+    redirectAuth();
+  };
 
   return (
     <div className="w-full h-svh flex items-center">
@@ -25,34 +22,12 @@ export default function LogIn() {
               height={80}
             />
           </CardTitle>
-          <CardTitle className="text-2xl mx-auto">Log in</CardTitle>
+          {/* <CardTitle className="text-2xl mx-auto">Log in</CardTitle> */}
         </CardHeader>
         <CardContent>
-          <div className="grid gap-4">
-            <div className="grid gap-3">
-              <Label htmlFor="key">Username</Label>
-              <Input
-                id="key"
-                type="text"
-                value={username}
-                onChange={(e) => setUsername(e.target.value)}
-              />
-            </div>
-
-            <div className="grid gap-3">
-              <Label htmlFor="key">Password</Label>
-              <Input
-                id="key"
-                type="password"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-              />
-            </div>
-
-            <Button className="mt-2" onClick={logIn}>
-              Log in
-            </Button>
-          </div>
+          <Button className="w-full" onClick={withGithub}>
+            Continue with github
+          </Button>
         </CardContent>
       </Card>
     </div>