1import NextAuth from "next-auth";
2import GitHub from "next-auth/providers/github";
3
4export const githubScopes = ["user", "repo", "delete_repo"] as const;
5
6export const { handlers, signIn, signOut, auth } = NextAuth({
7  pages: {
8    signIn: "/auth",
9  },
10  providers: [
11    GitHub({
12      authorization: {
13        params: {
14          scope: githubScopes.join(" "),
15        },
16      },
17    }),
18  ],
19  debug: true,
20  callbacks: {
21    authorized: async ({ auth }) => {
22      // Logged in users are authenticated, otherwise redirect to login page
23      return !!auth;
24    },
25  },
26});

1"use client";
2import { signIn } from "next-auth/react";
3import { useState } from "react";
4import { FaGithub } from "react-icons/fa";
5
6interface OauthButtonProps {}
7
8export function OauthButton({}: OauthButtonProps) {
9  const [selectedScopes, setSelectedScopes] = useState<string[]>([]);
10
11  const scopeOptions = [
12    {
13      id: "user",
14      label: "User Profile",
15      description: "Read/Write access to profile info",
16    },
17    {
18      id: "repo",
19      label: "Repository Access",
20      description: "Full control of public and private repositories",
21    },
22    {
23      id: "delete_repo",
24      label: "Delete Repositories",
25      description: "Ability to delete repositories",
26    },
27  ];
28
29  const handleScopeToggle = (scope: string) => {
30    setSelectedScopes((prev) =>
31      prev.includes(scope) ? prev.filter((s) => s !== scope) : [...prev, scope]
32    );
33  };
34
35  return (
36    <div className="w-full flex flex-col justify-center items-center gap-5">
37      <div className=" flex flex-col justify-center items-center gap-2">
38        {selectedScopes.length === 0 && (
39          <div role="alert" className="alert alert-info alert-outline">
40            <span className="text-xs text-center">
41              if no scopes are selected, 
42              the default read-only access to public information will be used
43            </span>
44          </div>
45        )}
46        {scopeOptions.map((scope) => (
47          <label
48            key={scope.id}
49            className="flex w-full bg-primary/10 items-start space-x-3 p-3 rounded-lg hover:bg-base-300 transition-colors">
50            <input
51              type="checkbox"
52              className="checkbox checkbox-accent mt-1 border border-accent"
53              checked={selectedScopes.includes(scope.id)}
54              onChange={() => handleScopeToggle(scope.id)}
55            />
56            <div className="flex flex-col">
57              <span className="font-medium">{scope.label}</span>
58              <span className="text-sm text-base-content/70">{scope.description}</span>
59            </div>
60          </label>
61        ))}
62      </div>
63      <button
64        className="btn btn-wide btn-accent w-full"
65        onClick={() =>
66          signIn(
67            "github",
68            {},
69            {
70              scope: selectedScopes.join(" ") || undefined,
71            }
72          )
73        }>
74        <FaGithub className="h-5 w-5" />
75        Sign in with GitHub
76      </button>
77    </div>
78  );
79}
80