feat: google登录
This commit is contained in:
14790897
parent
a0ce164b15
commit
15c3a1f0ac
|
|
@ -10,8 +10,8 @@ import { useTranslation } from "@/app/i18n";
|
|||
import { FooterBase } from "@/components/Footer/FooterBase";
|
||||
//supabase
|
||||
import { insertUserProfile } from "@/utils/supabase/supabaseutils";
|
||||
// signingithub
|
||||
import { SignInGitHub } from "@/components/SignInGitHub";
|
||||
// SignInWithProvider
|
||||
import { SignInWithProvider } from "@/components/SignInWithProvider";
|
||||
export default async function Login({
|
||||
searchParams,
|
||||
params: { lng },
|
||||
|
|
@ -141,7 +141,16 @@ export default async function Login({
|
|||
</p>
|
||||
)}
|
||||
</form>
|
||||
<SignInGitHub />
|
||||
<div>
|
||||
<SignInWithProvider
|
||||
provider="github"
|
||||
redirectTo="https://www.paperai.life/welcome"
|
||||
/>
|
||||
<SignInWithProvider
|
||||
provider="google"
|
||||
redirectTo="https://www.paperai.life/welcome"
|
||||
/>
|
||||
</div>
|
||||
<footer className="w-full border-t border-t-foreground/10 p-8 flex justify-center text-center text-xs">
|
||||
<div className="flex items-center space-x-4">
|
||||
{" "}
|
||||
|
|
|
|||
|
|
@ -1,68 +0,0 @@
|
|||
"use client";
|
||||
import { insertUserProfile } from "@/utils/supabase/supabaseutils";
|
||||
import { createClient } from "@/utils/supabase/client";
|
||||
import { useEffect } from "react";
|
||||
import * as Sentry from "@sentry/react";
|
||||
|
||||
export function SignInGitHub() {
|
||||
useEffect(() => {
|
||||
const supabase = createClient();
|
||||
const { data: data } = supabase.auth.onAuthStateChange(
|
||||
async (event, session) => {
|
||||
if (session && session.provider_token) {
|
||||
// 用户登录成功，执行后续操作
|
||||
await insertUserProfile(session!.user, supabase);
|
||||
Sentry.captureMessage("SignInGitHub中成功", "info");
|
||||
console.log("SignInGitHub中成功");
|
||||
}
|
||||
|
||||
Sentry.captureMessage(
|
||||
`SignInGitHub中的非SIGNED_IN的event：${event}`,
|
||||
"warning"
|
||||
);
|
||||
console.log("SignInGitHub中的非SIGNED_IN的event：", event);
|
||||
}
|
||||
);
|
||||
|
||||
return () => {
|
||||
// call unsubscribe to remove the callback
|
||||
data.subscription.unsubscribe();
|
||||
};
|
||||
}, []);
|
||||
|
||||
const signInWithGithub = async () => {
|
||||
const supabase = createClient();
|
||||
const { data, error } = await supabase.auth.signInWithOAuth({
|
||||
provider: "github",
|
||||
options: {
|
||||
redirectTo: "https://www.paperai.life/welcome",
|
||||
},
|
||||
});
|
||||
if (error) {
|
||||
console.error("GitHub authentication failed:", error.message);
|
||||
return; // 如果出现错误，不再继续执行
|
||||
}
|
||||
//profiles表 插入用户信息
|
||||
await insertUserProfile(data, supabase);
|
||||
};
|
||||
return (
|
||||
<button
|
||||
className="bg-black text-white rounded-md px-4 py-2 flex items-center justify-center"
|
||||
onClick={signInWithGithub}
|
||||
>
|
||||
<svg
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mr-2 h-4 w-4"
|
||||
>
|
||||
<title>GitHub icon</title>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M12 .3a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2C8.7 21 8 20 8 20c-1.1 0-1.8-.9-1.8-.9-.6-1-.1-1.8.1-2 .7-.6 1.8-.4 2.7.1.1-.5.3-.9.5-1.1-2.3-.3-4.7-1.1-4.7-5 0-1.1.4-2 1-2.7 0-1 .1-2 .7-2.7 0 0 .9-.3 2.8 1a9.8 9.8 0 0 1 5.2 0c1.9-1.3 2.8-1 2.8-1 .6.7.7 1.7.7 2.7.7.7 1 1.6 1 2.7 0 3.9-2.4 4.7-4.7 5 .3.2.6.7.6 1.4v2.1c0 .3.2.7.8.6A12 12 0 0 0 12 .3"
|
||||
/>
|
||||
</svg>
|
||||
Sign In with GitHub
|
||||
</button>
|
||||
);
|
||||
}
|
||||
64
components/SignInWithProvider.tsx
Normal file
64
components/SignInWithProvider.tsx
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
// components/SignInWithProvider.tsx
|
||||
|
||||
"use client";
|
||||
import { insertUserProfile } from "@/utils/supabase/supabaseutils";
|
||||
import { createClient } from "@/utils/supabase/client";
|
||||
import { useEffect } from "react";
|
||||
import * as Sentry from "@sentry/react";
|
||||
import { FaGithub, FaGoogle } from "react-icons/fa";
|
||||
|
||||
export function SignInWithProvider({ provider, redirectTo }) {
|
||||
useEffect(() => {
|
||||
const supabase = createClient();
|
||||
const { data } = supabase.auth.onAuthStateChange(async (event, session) => {
|
||||
if (session && session.provider_token) {
|
||||
// 用户登录成功，执行后续操作
|
||||
await insertUserProfile(session.user, supabase);
|
||||
Sentry.captureMessage(`${provider}登录成功`, "info");
|
||||
console.log(`${provider}登录成功`);
|
||||
} else {
|
||||
Sentry.captureMessage(
|
||||
`${provider}登录中的其它的event：${event}`,
|
||||
"warning"
|
||||
);
|
||||
console.log(`${provider}登录中的其它的event：`, event);
|
||||
}
|
||||
});
|
||||
|
||||
return () => data.subscription.unsubscribe();
|
||||
}, [provider]);
|
||||
|
||||
function getProviderIcon(provider) {
|
||||
switch (provider) {
|
||||
case "github":
|
||||
return <FaGithub />;
|
||||
case "google":
|
||||
return <FaGoogle />;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
const signIn = async () => {
|
||||
const supabase = createClient();
|
||||
const { data, error } = await supabase.auth.signInWithOAuth({
|
||||
provider: provider,
|
||||
options: { redirectTo: redirectTo },
|
||||
});
|
||||
|
||||
if (error) {
|
||||
console.error(`${provider} authentication failed:`, error.message);
|
||||
}
|
||||
//profiles表 插入用户信息
|
||||
await insertUserProfile(data, supabase);
|
||||
};
|
||||
return (
|
||||
<button
|
||||
onClick={signIn}
|
||||
className="bg-black text-white rounded-md px-4 py-2 mb-2 flex items-center justify-center gap-2 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white transition ease-in duration-200 w-full"
|
||||
>
|
||||
{getProviderIcon(provider)} Sign In with{" "}
|
||||
{provider.charAt(0).toUpperCase() + provider.slice(1)}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
15
package-lock.json
generated
15
package-lock.json
generated
|
|
@ -42,6 +42,7 @@
|
|||
"react-cookie": "^7.0.2",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-i18next": "^14.0.5",
|
||||
"react-icons": "^5.0.1",
|
||||
"react-redux": "^9.1.0",
|
||||
"react-toastify": "^10.0.4",
|
||||
"react-transition-group": "^4.4.5",
|
||||
|
|
@ -3502,6 +3503,14 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react-icons": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.0.1.tgz",
|
||||
"integrity": "sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw==",
|
||||
"peerDependencies": {
|
||||
"react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
|
|
@ -7066,6 +7075,12 @@
|
|||
"html-parse-stringify": "^3.0.1"
|
||||
}
|
||||
},
|
||||
"react-icons": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.0.1.tgz",
|
||||
"integrity": "sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw==",
|
||||
"requires": {}
|
||||
},
|
||||
"react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
|
|
|
|||
|
|
@ -41,6 +41,7 @@
|
|||
"react-cookie": "^7.0.2",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-i18next": "^14.0.5",
|
||||
"react-icons": "^5.0.1",
|
||||
"react-redux": "^9.1.0",
|
||||
"react-toastify": "^10.0.4",
|
||||
"react-transition-group": "^4.4.5",
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user