Page Login:
"use client"
import Image from 'next/image'
import googleImg from '../../assets/images/icons/google.png'
import styles from './login.module.scss'
import authWithGoogle from '../../services/authWithGoogle'
export default function Login () {
return (
<div className={styles.login}>
<div className={styles.login__container}>
<h1 className={styles.login__text}>LOGIN IN TO YOUR ACCOUNT</h1>
<div className={styles.login__block}>
<div className={styles.google__login__block}>
<button className={styles.google__login__button} onClick={authWithGoogle}>
<Image src={googleImg} alt="login google icon" width={30} quality={100} placeholder='blur'/>
Google</button>
</div>
</div>
</div>
</div>
)
}
Login Service:
import { signInWithPopup, GoogleAuthProvider } from "firebase/auth";
import {auth} from '../firebase/firebase'
const loginService = () => {
const provider = new GoogleAuthProvider();
signInWithPopup(auth, provider)
.then((result) => {
const credential = GoogleAuthProvider.credentialFromResult(result);
const token = credential.accessToken;
const user = result.user;
}).catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
const email = error.customData.email;
const credential = GoogleAuthProvider.credentialFromError(error);
});
}
export default loginService"use client"
import { useDispatch } from "react-redux"
import { setEmail, setPassword } from "@/actions/actions"
import { useState } from "react"
import RegisterService from "@/services/register"
export default function Signup() {
const dispatch = useDispatch()
const [userEmail, setUserEmail] = useState("")
const [userPassword, setUserPassword] = useState("")
const saveEmail = (e:any) => {
e.preventDefault()
const data = e.target.value
setUserEmail(data)
}
const savePassword = (e:any) => {
e.preventDefault()
const data = e.target.value
setUserPassword(data)
}
const submitData = (e: any) => {
e.preventDefault()
dispatch(setEmail(userEmail))
dispatch(setPassword(userPassword))
RegisterService()
}
return (
<div>
<h2>CREATE ACOUNT</h2>
<form onSubmit={submitData}>
<input type="text" placeholder="email" value={userEmail} required onChange={saveEmail}/>
<input type="password" placeholder="password" value={userPassword} required onChange={savePassword}/>
<button>Create</button>
</form>
</div>
)
}
Register Service :
"use client"
import { createUserWithEmailAndPassword } from "firebase/auth";
import {auth} from '../firebase/firebase'
import {useSelector} from "react-redux";
const RegisterService = () => {
const email = useSelector(state => state.email)
const password = useSelector(state => state.password)
createUserWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
// Signed in
const user = userCredential.user;
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
// ..
});
}
export default RegisterService"use client"
import { useDispatch } from "react-redux"
import { setEmail, setPassword } from "@/actions/actions"
import { useState } from "react"
import RegisterService from "@/services/register"
export default function Signup() {
const dispatch = useDispatch()
const [userEmail, setUserEmail] = useState("")
const [userPassword, setUserPassword] = useState("")
const saveEmail = (e:any) => {
e.preventDefault()
const data = e.target.value
setUserEmail(data)
}
const savePassword = (e:any) => {
e.preventDefault()
const data = e.target.value
setUserPassword(data)
}
const submitData = (e: any) => {
e.preventDefault()
dispatch(setEmail(userEmail))
dispatch(setPassword(userPassword))
RegisterService()
}
return (
<div>
<h2>CREATE ACOUNT</h2>
<form onSubmit={submitData}>
<input type="text" placeholder="email" value={userEmail} required onChange={saveEmail}/>
<input type="password" placeholder="password" value={userPassword} required onChange={savePassword}/>
<button>Create</button>
</form>
</div>
)
}
Вызываю так