I am facing a issue where I can login/register but I cannot sign out in the app.
This is the error I am getting from my terminal:
In my HomeScreen.js, below contains the code I did for signout:
import { auth } from '../firebase'
import { useNavigation } from '#react-navigation/core'
import { signOut } from 'firebase/auth'
const navigation = useNavigation()
const handleSignOut = async () =>{
try{
const { user } = signOut()
console.log("Signed out successfully")
navigation.replace("Login")
}catch (error) {
console.log({error});
}
}
Updated HomeScreen.js
import { auth } from '../firebase'
import { useNavigation } from '#react-navigation/core'
import { signOut } from 'firebase/auth'
const navigation = useNavigation()
const handleSignOut = async () =>{
try{
await signOut()
console.log("Signed out successfully")
navigation.replace("Login")
}catch (error) {
console.log({error});
}
}
As this is my first time doing this, I am trying to replicate what I did for login which is
import { auth } from '../firebase'
import { createUserWithEmailAndPassword } from "firebase/auth"
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const handleSignUp = async () => {
try {
if (email && password) {
const { user } = await createUserWithEmailAndPassword(auth, email, password)
console.log(user);
}
} catch (error) {
console.log({error});
}
}
I am guessing this is wrong so can anyone help me with this? Thank you very much!
You need to import auth from firebase like this:
import {auth} from '../firebase'
import { useNavigation } from '#react-navigation/core'
import { signOut } from 'firebase/auth'
const navigation = useNavigation()
const handleSignOut = async () =>{
try{
await signOut(auth);
console.log("Signed out successfully")
navigation.replace("Login")
}catch (error) {
console.log({error});
}
}
Related
I have been trying to setup authentication on my project for a while using firebase authentication. I am doing a Next.js project.
I am having issues where If I login and refresh the page, I have to login again, I found a partial solution which involves using contexts, but whenever I use it to login, I am getting type error login is not a function. I have attached 3 files I am using
here is my context file
import { createContext, useContext } from "react";
import { useFirebaseAuth } from "../firebase";
const authUserContext = createContext({
authUser: null,
loading: true,
login: async () => {},
});
export function AuthUserProvider({ children }) {
const Auth = useFirebaseAuth;
return (
<authUserContext.Provider value={Auth}>{children}</authUserContext.Provider>
);
}
export const useAuth = () => useContext(authUserContext);
Here is my login page. If i just make the login as a regular export in the firebase Auth file, I dont get the error, i am able to login but the context doesnt get updated.
import React from "react";
import { useState } from "react";
// import { emailRegex } from "../components/Utilities/validations";
import { useAuth } from "../components/contexts/userContext";
const Login = () => {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const { login, authUser } = useAuth();
const [loading2, setLoading] = useState(false);
const handleSubmit = async (e) => {
// validate(e.values);
e.preventDefault();
setLoading(true);
try {
const user = await login(email, password);
console.log(user.user);
console.log(authUser);
} catch (err) {
console.log(err);
}
setLoading(false);
};
};
export default Login;
and here is the firebase code I have. If I remove the login function from the scope of the useFirebaseAuth, I can just import the login normally and get a login token. However, it doesnt update the authUser. If I refresh the page, I have to login again.
function useFirebaseAuth() {
const [authUser, setAuthUser] = useState(null);
const [loading, setLoading] = useState(true);
const formatAuthUser = (user) => ({
uid: user.uid,
email: user.email,
});
const authStateChanged = async (authState) => {
if (!authState) {
setAuthUser(null);
setLoading(false);
return;
}
setLoading(true);
const formattedUser = formatAuthUser(authState);
setAuthUser(formattedUser);
console.log("useAuth " + authUser?.email);
};
const login = (email, password) => {
const promise = auth.signInWithEmailAndPassword(auth, email, password);
console.log(promise);
return promise;
};
useEffect(() => {
const unsub = auth.onAuthStateChanged(authStateChanged);
return unsub;
}, []);
return {
authUser,
loading,
login,
};
}
I should make user auth with React JS and Firebase. I have written the codes bellow and getting
POST https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=XXXXXXX%3B 400 I have done everything following the instruction but don't know what the problem is. When the user signs up, it is not appearing in firebase identifier.
base.js
import * as firebase from "firebase/app";
import {getAuth} from "firebase/auth";
const app = firebase.initializeApp({
...
});
export const auth = getAuth(app);
export default app;
AuthContext.js
import React, { useState, useContext, useEffect } from "react";
import { auth } from "../base";
import {
createUserWithEmailAndPassword,
onAuthStateChanged,
} from "#firebase/auth";
export const AuthContext = React.createContext();
export function useAuth() {
return useContext(AuthContext);
}
export function AuthProvider({ children }) {
const [currentUser, setCurrentUser] = useState();
const [loading, setLoading] = useState(true);
function signup(email, password) {
return createUserWithEmailAndPassword(auth, email, password);
}
useEffect(() => {
const unsubscribe = onAuthStateChanged(auth, (user) => {
setCurrentUser(user);
setLoading(false);
});
return unsubscribe;
}, []);
const value = {
currentUser,
signup,
};
return (
<AuthContext.Provider value={value}>
{!loading && children}
</AuthContext.Provider>
);
}
Code in signUp page
const { signup, currentUser } = useAuth();
const handleSubmit = async (e) => {
e.preventDefault();
const v1 = USER_REGEX.test(user);
const v2 = PWD_REGEX.test(pwd);
if (!v1 || !v2) {
setErrMsg("Invalid Entry");
return;
}
try {
setErrMsg('')
setLoading(true)
await signup(emailRef.current.value, pwdRef.current.value);
} catch {
setErrMsg("Failed to create an account");
}
setLoading(false)
console.log(user, emailRef, pwdRef);
setSuccess(true);
};
I am building an app using next13 (to make use of server side components), however, for some reason my existing AuthContext is not working. I am getting the following error:
TypeError: React.createContext is not a function
From what I can see, the AuthContext needs to be set to 'use client', as there is use of useState and useEffect within it, but for some reason the application no longer recognises that createContext is actually a function.
This is my AuthContext:
'use client';
import { createContext, useContext, useEffect, useState } from 'react';
import { onAuthStateChanged, signOut, signInWithEmailAndPassword, createUserWithEmailAndPassword } from 'firebase/auth';
import { auth } from '../config';
const AuthContext = createContext({});
export const useAuth = () => useContext(AuthContext);
export const AuthContextProvider = ({ children }) => {
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
const unsubscribe = onAuthStateChanged(auth, (user) => {
setLoading(true);
setUser(user ?? null);
setLoading(false);
});
return () => unsubscribe();
}, []);
const login = async (email, password) => {
await signInWithEmailAndPassword(auth, email, password);
};
const logout = async () => {
setUser(null);
await signOut(auth)
};
const register = async (email, password) => {
try {
const userCred = await createUserWithEmailAndPassword(auth, email, password);
await userCred.user.sendEmailVerification({
url: process.env.NEXT_PUBLIC_HOST
});
} catch (err) {
return {
errorCode,
errorMessage
}
}
};
return (
<AuthContext.Provider value={{ user, loading, login, logout, register }}>
{children}
</AuthContext.Provider>
);
};
The AuthContext is then used in my main layout page within the app directory:
'use client';
import { CssBaseline, Container } from '#mui/material';
import { NavBar, Footer } from '../components';
import { AuthContextProvider } from '../context';
import '#fontsource/roboto/300.css';
import '#fontsource/roboto/400.css';
import '#fontsource/roboto/500.css';
import '#fontsource/roboto/700.css';
const RootLayout = ({ children }) => {
return (
<html lang='en'>
<head>
<link rel="icon" href="/favicon.ico" />
</head>
<body>
<AuthContextProvider>
<CssBaseline />
<NavBar />
<Container component='main' sx={{ padding: 3 }}>
{children}
</Container>
<Footer />
</AuthContextProvider>
</body>
</html>
);
}
export default RootLayout;
I am unsure if I need to take a different approach to authentication, perhaps using the next-auth package, but I am not sure what the best way would be.
Cheers for any help!
Here's an example of useContext I am using on my application.
'use client'
import { createContext, useContext, useEffect, useState } from 'react'
import { getAuth, User } from 'firebase/auth'
import { initializeApp, getApps, getApp } from 'firebase/app'
import nookies from 'nookies'
const firebaseConfig = {
...
}
getApps().length ? getApp() : initializeApp(firebaseConfig)
const auth = getAuth()
const AuthContext = createContext<User | null>(null)
export function AuthProvider({ children }: any) {
//
const [user, setUser] = useState<User | null>(null)
useEffect(() => {
return auth.onIdTokenChanged(async (user) => {
if (!user) {
setUser(null)
nookies.set(undefined, 'token', '', { path: '/' })
} else {
const token = await user.getIdToken()
setUser(user)
nookies.set(undefined, 'token', token, { path: '/' })
}
})
}, [])
useEffect(() => {
const handle = setInterval(async () => {
const user = auth.currentUser
if (user) await user.getIdToken(true)
}, 15 * 60 * 1000)
return () => clearInterval(handle)
}, [])
return <AuthContext.Provider value={user}>{children}</AuthContext.Provider>
}
export const useAuth = () => {
return useContext(AuthContext)
}
Note that we're also forcing token refresh every 15 minutes, and saving that to cookies. You can access cookies in server pages using the new next13 cookies package.
You can also get the user by importing the useAuth hook we just created.
For example
'use client'
import useAuth from '../context/AuthProvider'
const Page = () => {
const {user} = useAuth()
// Rest of your application
}
Hope it helps
I'm running into an error with my Login:
const Login = ({ history }) => {
const handleLogin = useCallback(
async event => {
event.preventDefault();
const { email, password } = event.target.elements;
try {
await app
.auth()
.signInWithEmailAndPassword(email.value, password.value);
app.auth().setPersistence(app.auth.Auth.Persistence.SESSION);
history.push("/feed");
} catch (error) {
alert(error);
}
},
[history]
);
I think that my setPersistence is at the wrong place but I don't know how to fix that.
My import list:
import React, { useCallback, useContext } from "react";
import { withRouter, Redirect } from "react-router";
import app from "../../firebase";
import { AuthContext } from "../../Auth";
Thank you!
You have to call setPersistence before calling signInWithEmailAndPassword.
const Login = ({ history }) => {
const handleLogin = useCallback(
async event => {
event.preventDefault();
const { email, password } = event.target.elements;
try {
await app.auth().setPersistence(app.auth.Auth.Persistence.SESSION);
await app
.auth()
.signInWithEmailAndPassword(email.value, password.value);
history.push("/feed");
} catch (error) {
alert(error);
}
},
[history]
);
I have the following component:
import Firebase from '../Firebase/firebase';
function SignIn() {
const[email, setEmail] = useState('');
const[password, setPassword] = useState('');
async function onSignIn() {
try {
await Firebase.doSignInWithEmailAndPassword(email, password);
this.props.history.push('/start');
} catch(error) {
alert(error);
}
}
Here is my firebase class:
import app from 'firebase/app';
import 'firebase/auth';
// Your web app's Firebase configuration
class Firebase {
constructor() {
app.initializeApp(config);
this.auth = app.auth;
}
doSignInWithEmailAndPassword = (email, password) => {
return this.auth.signInWithEmailAndPassword(email, password);
}
logout() {
return this.auth.signOut();
}
async register(name, email, password) {
await this.auth.createUserWithEmailAndPassword(email, password);
return this.auth.currentUser.updateProfile({
displayName: name
});
}
}
export default new Firebase();
Error:
TypeError: this.auth.signInWithEmailAndPassword is not a function
I can't understand why I get this?
Have you tried this ?
this.auth = app.auth()