Spaces:
Runtime error
Runtime error
hf sign in
Browse files- app/api/auth/route.ts +26 -17
- app/api/me/route.ts +24 -0
- app/login/callback/page.tsx +2 -47
- components/login/index.tsx +16 -0
- components/main/index.tsx +1 -2
- utils/useUser.ts +65 -0
app/api/auth/route.ts
CHANGED
@@ -1,26 +1,35 @@
|
|
1 |
export async function POST(req: Request) {
|
2 |
-
const
|
3 |
-
const { code } = await req.json()
|
4 |
|
5 |
-
const
|
6 |
-
|
7 |
-
|
8 |
-
|
9 |
-
},
|
10 |
-
body: JSON.stringify({
|
11 |
-
client_id: process.env.OAUTH_CLIENT_ID,
|
12 |
-
code,
|
13 |
-
grand_type: 'authorization_code',
|
14 |
-
redirect_uri: REDIRECT_URI,
|
15 |
-
}),
|
16 |
-
})
|
17 |
|
18 |
-
|
19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
20 |
|
21 |
return Response.json(
|
22 |
{
|
23 |
-
response,
|
|
|
24 |
status: 200,
|
25 |
ok: true
|
26 |
}
|
|
|
1 |
export async function POST(req: Request) {
|
2 |
+
const { code } = await req.json();
|
|
|
3 |
|
4 |
+
const REDIRECT_URI = `https://${process.env.SPACE_HOST}/login/callback`;
|
5 |
+
const Authorization = `Basic ${Buffer.from(
|
6 |
+
`${process.env.OAUTH_CLIENT_ID}:${process.env.OAUTH_CLIENT_SECRET}`
|
7 |
+
).toString("base64")}`;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
8 |
|
9 |
+
const request = await fetch("https://huggingface.co/oauth/token", {
|
10 |
+
method: "POST",
|
11 |
+
headers: {
|
12 |
+
"Content-Type": "application/x-www-form-urlencoded",
|
13 |
+
Authorization,
|
14 |
+
},
|
15 |
+
body: new URLSearchParams({
|
16 |
+
grant_type: "authorization_code",
|
17 |
+
code,
|
18 |
+
redirect_uri: REDIRECT_URI,
|
19 |
+
}),
|
20 |
+
});
|
21 |
+
|
22 |
+
const response = await request
|
23 |
+
.clone()
|
24 |
+
.json()
|
25 |
+
.catch(() => ({}));
|
26 |
+
|
27 |
+
if (response.error) return Response.json({ status: 401, ok: false, message: response.error_description });
|
28 |
|
29 |
return Response.json(
|
30 |
{
|
31 |
+
access_token: response.access_token,
|
32 |
+
experes_in: response.expires_in,
|
33 |
status: 200,
|
34 |
ok: true
|
35 |
}
|
app/api/me/route.ts
ADDED
@@ -0,0 +1,24 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
import { cookies } from "next/headers"
|
2 |
+
|
3 |
+
export async function GET() {
|
4 |
+
const cookie = cookies().get("auth_hf_token")
|
5 |
+
|
6 |
+
if (!cookie) return Response.json({ status: 401, ok: false, message: "Unauthorized" });
|
7 |
+
|
8 |
+
const request = await fetch("https://huggingface.co/oauth/userinfo", {
|
9 |
+
method: "GET",
|
10 |
+
headers: {
|
11 |
+
Authorization: `Bearer ${cookie.value}`,
|
12 |
+
},
|
13 |
+
})
|
14 |
+
|
15 |
+
const res = await request.clone().json().catch(() => ({}));
|
16 |
+
|
17 |
+
return Response.json(
|
18 |
+
{
|
19 |
+
user: res,
|
20 |
+
status: 200,
|
21 |
+
ok: true
|
22 |
+
}
|
23 |
+
)
|
24 |
+
}
|
app/login/callback/page.tsx
CHANGED
@@ -1,54 +1,9 @@
|
|
1 |
-
import {
|
2 |
-
|
3 |
-
async function getAuth(code: string) {
|
4 |
-
try {
|
5 |
-
const REDIRECT_URI = `https://${process.env.SPACE_HOST}/login/callback`;
|
6 |
-
const Authorization = `Basic ${Buffer.from(
|
7 |
-
`${process.env.OAUTH_CLIENT_ID}:${process.env.OAUTH_CLIENT_SECRET}`
|
8 |
-
).toString("base64")}`;
|
9 |
-
|
10 |
-
// const request = await fetch("https://huggingface.co/oauth/token", {
|
11 |
-
// method: "POST",
|
12 |
-
// headers: {
|
13 |
-
// "Content-Type": "application/x-www-form-urlencoded",
|
14 |
-
// Authorization,
|
15 |
-
// },
|
16 |
-
// // send as Form data
|
17 |
-
// body: new URLSearchParams({
|
18 |
-
// grant_type: "authorization_code",
|
19 |
-
// code,
|
20 |
-
// redirect_uri: REDIRECT_URI,
|
21 |
-
// }),
|
22 |
-
// });
|
23 |
-
|
24 |
-
// const response = await request
|
25 |
-
// .clone()
|
26 |
-
// .json()
|
27 |
-
// .catch(() => ({}));
|
28 |
-
|
29 |
-
// console.log(response);
|
30 |
-
// if (!response.access_token) {
|
31 |
-
// return response;
|
32 |
-
// }
|
33 |
-
// @ts-ignore
|
34 |
-
// cookies.set("access_token", response.access_token, {});
|
35 |
-
|
36 |
-
return {};
|
37 |
-
} catch (error) {
|
38 |
-
return error;
|
39 |
-
}
|
40 |
-
}
|
41 |
|
42 |
export default async function LoginCallback({
|
43 |
searchParams,
|
44 |
}: {
|
45 |
searchParams: { [key: string]: string | string[] | undefined };
|
46 |
}) {
|
47 |
-
|
48 |
-
return (
|
49 |
-
<div className="pb-32 text-white">
|
50 |
-
<p className="font-bold text-4xl text-white">LOGIN CALLBACK</p>
|
51 |
-
{/* {profile && JSON.stringify(profile, null, 2)} */}
|
52 |
-
</div>
|
53 |
-
);
|
54 |
}
|
|
|
1 |
+
import { Login } from "@/components/login";
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2 |
|
3 |
export default async function LoginCallback({
|
4 |
searchParams,
|
5 |
}: {
|
6 |
searchParams: { [key: string]: string | string[] | undefined };
|
7 |
}) {
|
8 |
+
return <Login code={searchParams.code as string} />;
|
|
|
|
|
|
|
|
|
|
|
|
|
9 |
}
|
components/login/index.tsx
ADDED
@@ -0,0 +1,16 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
"use client";
|
2 |
+
|
3 |
+
import { useUser } from "@/utils/useUser";
|
4 |
+
import { useMount } from "react-use";
|
5 |
+
|
6 |
+
export const Login = ({ code }: { code?: string }) => {
|
7 |
+
const { getAuthorization } = useUser();
|
8 |
+
|
9 |
+
useMount(() => getAuthorization(code as string));
|
10 |
+
|
11 |
+
return (
|
12 |
+
<div className="pb-32 text-white">
|
13 |
+
<p className="font-bold text-4xl text-white">LOGIN</p>
|
14 |
+
</div>
|
15 |
+
);
|
16 |
+
};
|
components/main/index.tsx
CHANGED
@@ -26,8 +26,7 @@ const categories = [
|
|
26 |
];
|
27 |
|
28 |
export const Main = () => {
|
29 |
-
const user =
|
30 |
-
const { openWindowLogin } = useUser();
|
31 |
const { list_styles, style, setStyle, loading } = useInputGeneration();
|
32 |
const [category, setCategory] = useState<string>("community");
|
33 |
const [advancedSettings, setAdvancedSettings] = useState<boolean>(false);
|
|
|
26 |
];
|
27 |
|
28 |
export const Main = () => {
|
29 |
+
const { openWindowLogin, user } = useUser();
|
|
|
30 |
const { list_styles, style, setStyle, loading } = useInputGeneration();
|
31 |
const [category, setCategory] = useState<string>("community");
|
32 |
const [advancedSettings, setAdvancedSettings] = useState<boolean>(false);
|
utils/useUser.ts
CHANGED
@@ -1,4 +1,50 @@
|
|
|
|
|
|
|
|
|
|
|
|
1 |
export const useUser = () => {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2 |
const openWindowLogin = async () => {
|
3 |
const response = await fetch(`/api/login`);
|
4 |
const { ok, redirect } = await response.json();
|
@@ -7,7 +53,26 @@ export const useUser = () => {
|
|
7 |
}
|
8 |
};
|
9 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
10 |
return {
|
11 |
openWindowLogin,
|
|
|
|
|
|
|
|
|
|
|
12 |
}
|
13 |
}
|
|
|
1 |
+
"use client";
|
2 |
+
|
3 |
+
import { useCookie, useUpdateEffect } from "react-use";
|
4 |
+
import { useQuery } from "@tanstack/react-query";
|
5 |
+
|
6 |
export const useUser = () => {
|
7 |
+
const [value, setValue, remove] = useCookie("auth_hf_token");
|
8 |
+
|
9 |
+
const {
|
10 |
+
data: user,
|
11 |
+
refetch,
|
12 |
+
isLoading: loading,
|
13 |
+
remove: clear,
|
14 |
+
}: any = useQuery(
|
15 |
+
["user.me"],
|
16 |
+
async () => {
|
17 |
+
if (!value) return null;
|
18 |
+
const request = await fetch("/api/me", {
|
19 |
+
method: "GET",
|
20 |
+
headers: {
|
21 |
+
Authorization: `Bearer ${value}`,
|
22 |
+
},
|
23 |
+
})
|
24 |
+
|
25 |
+
const res = await request.clone().json().catch(() => ({}));
|
26 |
+
|
27 |
+
if (res.status === 401) {
|
28 |
+
remove();
|
29 |
+
clear();
|
30 |
+
return null;
|
31 |
+
}
|
32 |
+
return res;
|
33 |
+
},
|
34 |
+
{
|
35 |
+
refetchOnWindowFocus: false,
|
36 |
+
}
|
37 |
+
);
|
38 |
+
|
39 |
+
const setCookieToken = async (token: string) => setValue(token, { expires: 7 });
|
40 |
+
|
41 |
+
useUpdateEffect(() => {
|
42 |
+
if (value) {
|
43 |
+
refetch()
|
44 |
+
}
|
45 |
+
}
|
46 |
+
, [value]);
|
47 |
+
|
48 |
const openWindowLogin = async () => {
|
49 |
const response = await fetch(`/api/login`);
|
50 |
const { ok, redirect } = await response.json();
|
|
|
53 |
}
|
54 |
};
|
55 |
|
56 |
+
const getAuthorization = async (code: string) => {
|
57 |
+
const request = await fetch("/api/auth", {
|
58 |
+
method: "POST",
|
59 |
+
body: JSON.stringify({
|
60 |
+
code,
|
61 |
+
}),
|
62 |
+
});
|
63 |
+
const res = await request.clone().json().catch(() => ({}));
|
64 |
+
if (!res.ok) return
|
65 |
+
setValue(res.access_token, {
|
66 |
+
expires: res.experes_in,
|
67 |
+
});
|
68 |
+
}
|
69 |
+
|
70 |
return {
|
71 |
openWindowLogin,
|
72 |
+
user,
|
73 |
+
refetch,
|
74 |
+
loading,
|
75 |
+
setCookieToken,
|
76 |
+
getAuthorization
|
77 |
}
|
78 |
}
|