-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1 from Quinta0/userlogin
Lets try this user login
- Loading branch information
Showing
4 changed files
with
190 additions
and
18 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| import React, { createContext, useContext, useEffect, useState } from 'react'; | ||
| import { auth, database } from '@/firebaseConfig'; | ||
| import { User, createUserWithEmailAndPassword, signInWithEmailAndPassword, signOut } from 'firebase/auth'; | ||
| import { ref, set, get } from 'firebase/database'; | ||
|
|
||
| interface AuthContextType { | ||
| user: User | null; | ||
| signUp: (email: string, password: string, friendCode: string) => Promise<void>; | ||
| signIn: (email: string, password: string) => Promise<void>; | ||
| logOut: () => Promise<void>; | ||
| setFriendCode: (code: string) => Promise<void>; | ||
| friendCode: string | null; | ||
| } | ||
|
|
||
| const AuthContext = createContext<AuthContextType | undefined>(undefined); | ||
|
|
||
| export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => { | ||
| const [user, setUser] = useState<User | null>(null); | ||
| const [friendCode, setFriendCode] = useState<string | null>(null); | ||
|
|
||
| useEffect(() => { | ||
| const unsubscribe = auth.onAuthStateChanged(async (user) => { | ||
| setUser(user); | ||
| if (user) { | ||
| const friendCodeRef = ref(database, `users/${user.uid}/friendCode`); | ||
| const snapshot = await get(friendCodeRef); | ||
| if (snapshot.exists()) { | ||
| setFriendCode(snapshot.val()); | ||
| } | ||
| } else { | ||
| setFriendCode(null); | ||
| } | ||
| }); | ||
| return unsubscribe; | ||
| }, []); | ||
|
|
||
| const signUp = async (email: string, password: string, friendCode: string) => { | ||
| const userCredential = await createUserWithEmailAndPassword(auth, email, password); | ||
| await set(ref(database, `users/${userCredential.user.uid}/friendCode`), friendCode); | ||
| setFriendCode(friendCode); | ||
| }; | ||
|
|
||
| const signIn = async (email: string, password: string) => { | ||
| await signInWithEmailAndPassword(auth, email, password); | ||
| }; | ||
|
|
||
| const logOut = async () => { | ||
| await signOut(auth); | ||
| setFriendCode(null); | ||
| }; | ||
|
|
||
| const setFriendCodeForUser = async (code: string) => { | ||
| if (user) { | ||
| await set(ref(database, `users/${user.uid}/friendCode`), code); | ||
| setFriendCode(code); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <AuthContext.Provider value={{ user, signUp, signIn, logOut, setFriendCode: setFriendCodeForUser, friendCode }}> | ||
| {children} | ||
| </AuthContext.Provider> | ||
| ); | ||
| }; | ||
|
|
||
| export const useAuth = () => { | ||
| const context = useContext(AuthContext); | ||
| if (context === undefined) { | ||
| throw new Error('useAuth must be used within an AuthProvider'); | ||
| } | ||
| return context; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
| import React, { useState } from 'react'; | ||
| import { useAuth } from './AuthProvider'; | ||
| import { Button } from "@/components/ui/button"; | ||
| import { Input } from "@/components/ui/input"; | ||
| import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; | ||
|
|
||
| const LoginForm: React.FC = () => { | ||
| const [email, setEmail] = useState(''); | ||
| const [password, setPassword] = useState(''); | ||
| const [friendCode, setFriendCode] = useState(''); | ||
| const { signIn, signUp } = useAuth(); | ||
|
|
||
| const handleSignIn = async (e: React.FormEvent) => { | ||
| e.preventDefault(); | ||
| try { | ||
| await signIn(email, password); | ||
| } catch (error) { | ||
| console.error('Failed to sign in', error); | ||
| } | ||
| }; | ||
|
|
||
| const handleSignUp = async (e: React.FormEvent) => { | ||
| e.preventDefault(); | ||
| try { | ||
| await signUp(email, password, friendCode); | ||
| } catch (error) { | ||
| console.error('Failed to sign up', error); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <Tabs defaultValue="signin" className="w-[400px]"> | ||
| <TabsList className="grid w-full grid-cols-2"> | ||
| <TabsTrigger value="signin">Sign In</TabsTrigger> | ||
| <TabsTrigger value="signup">Sign Up</TabsTrigger> | ||
| </TabsList> | ||
| <TabsContent value="signin"> | ||
| <form onSubmit={handleSignIn} className="space-y-4"> | ||
| <Input | ||
| type="email" | ||
| value={email} | ||
| onChange={(e) => setEmail(e.target.value)} | ||
| placeholder="Email" | ||
| required | ||
| /> | ||
| <Input | ||
| type="password" | ||
| value={password} | ||
| onChange={(e) => setPassword(e.target.value)} | ||
| placeholder="Password" | ||
| required | ||
| /> | ||
| <Button type="submit" className="w-full">Sign In</Button> | ||
| </form> | ||
| </TabsContent> | ||
| <TabsContent value="signup"> | ||
| <form onSubmit={handleSignUp} className="space-y-4"> | ||
| <Input | ||
| type="email" | ||
| value={email} | ||
| onChange={(e) => setEmail(e.target.value)} | ||
| placeholder="Email" | ||
| required | ||
| /> | ||
| <Input | ||
| type="password" | ||
| value={password} | ||
| onChange={(e) => setPassword(e.target.value)} | ||
| placeholder="Password" | ||
| required | ||
| /> | ||
| <Input | ||
| type="text" | ||
| value={friendCode} | ||
| onChange={(e) => setFriendCode(e.target.value)} | ||
| placeholder="NMS Friend Code" | ||
| required | ||
| /> | ||
| <Button type="submit" className="w-full">Sign Up</Button> | ||
| </form> | ||
| </TabsContent> | ||
| </Tabs> | ||
| ); | ||
| }; | ||
|
|
||
| export default LoginForm; |