diff --git a/Auth.js b/Auth.js new file mode 100644 index 0000000..c57d173 --- /dev/null +++ b/Auth.js @@ -0,0 +1,9 @@ +import pb from "./lib/pocketbase" +export default function Auth(){ + return ( + <> +

Logged In: {pb.authStore.isValid.toString()}

+ + + ) +} \ No newline at end of file diff --git a/app/page.tsx b/app/page.tsx index 4e81370..7189dd6 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -3,14 +3,21 @@ import StartPage from "@/components/ours/Start Page/StartPage"; import TextScroll from "@/components/ours/Start Page/TextScroll/page"; import SignUpSection from "@/components/ours/Start Page/SignUpSection"; import {Footer} from "@/components/ours/Start Page/Footer"; +import Auth from "@/Auth"; +import AuthWrapper from "@/contexts/AuthWrapper"; + export default function Home() { return ( -
- - - - -
+ +
+ + + + +
+
+ ); } diff --git a/contexts/AuthWrapper.tsx b/contexts/AuthWrapper.tsx new file mode 100644 index 0000000..14192ca --- /dev/null +++ b/contexts/AuthWrapper.tsx @@ -0,0 +1,102 @@ +"use client"; + +import { + createContext, + FC, + ReactNode, + useContext, + useEffect, + useState, +} from "react"; +import { useRouter } from "next/navigation"; +import pb from "../lib/pocketbase"; +import type { AuthProviderInfo, Record as PbRecord } from "pocketbase"; + +interface PbUser { + id: string; + name: string; + email: string; + username: string; + avatarUrl: string; +} + +interface AuthContextType { + user: PbUser | null; + googleSignIn: () => void; + githubSignIn: () => void; + setUserData: (user: PbRecord) => void; + signOut: () => void; +} + +const AuthContext = createContext(null); + +const AuthWrapper: FC<{ children: ReactNode }> = ({ children }) => { + const router = useRouter(); + + const [user, setUser] = useState(null); + const [googleAuthProvider, setGoogleAuthProvider] = + useState(null); + const [githubAuthProvider, setGithubAuthProvider] = + useState(null); + + useEffect(() => { + const initAuth = async () => { + const authMethods = await pb + .collection("users") + .listAuthMethods() + .then((methods) => methods) + .catch((err) => { + console.error(err); + }); + + if (authMethods) + for (const provider of authMethods.authProviders) { + if (provider.name === "google") setGoogleAuthProvider(provider); + if (provider.name === "github") setGithubAuthProvider(provider); + } + }; + + initAuth(); + + if (pb.authStore.model) setUserData(pb.authStore.model as PbRecord); + }, []); + + const setUserData = (pbUser: PbRecord) => { + const { id, name, email, username, avatarUrl } = pbUser; + setUser({ id, name, email, username, avatarUrl }); + }; + + const googleSignIn = () => { + signOut(); + localStorage.setItem("provider", JSON.stringify(googleAuthProvider)); + const redirectUrl = `${location.origin}/signin`; + const url = googleAuthProvider?.authUrl + redirectUrl; + + router.push(url); + }; + + const githubSignIn = () => { + signOut(); + localStorage.setItem("provider", JSON.stringify(githubAuthProvider)); + const redirectUrl = `${location.origin}/signin`; + const url = githubAuthProvider?.authUrl + redirectUrl; + + router.push(url); + }; + + const signOut = () => { + setUser(null); + pb.authStore.clear(); + }; + + return ( + + {children} + + ); +}; + +export const usePbAuth = () => useContext(AuthContext) as AuthContextType; +export default AuthWrapper; \ No newline at end of file