Develop Reference

React context API authentication not working

I'm trying to set up a simple authentication system using react's context api. I have two react pages here using react router, Login.js and App.js.
Here's App.js, I want it to use the isAuthenticated boolean from the context api to decide which page to render:
App.js:
function App() {
const { isAuthenticated } = useContext(AuthContext);
return (
<div className="App">
<AuthContextProvider>
<Router>
<Routes>
<Route path="/" element={isAuthenticated ? <Home /> : <Login />} />
<Route path="/register" element={isAuthenticated ? <Home /> : <Register />} />
</Routes>
</Router>
</AuthContextProvider>
</div>
);
}
Here's how login.js authenticates the user:
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const { dispatch } = useContext(AuthContext);
const handleClick = (e) => {
e.preventDefault();
dispatch({ type: "LOGIN_START" });
try {
const credentials = {
email: email,
password: password,
}
//Make login request to the server, and use the userID it sends back to authenticate the user
//Currently has a bug where userID is blank on first call, but works on later calls
axios.post('/auth/login', credentials)
.then(response => {
dispatch({ type: "LOGIN_SUCCESS", payload: response.data });
// console.log(userID);
// console.log(isAuthenticated);
})
.catch(err => {
console.log(err)
dispatch({ type: "LOGIN_FAILURE", payload: err });
});
}
catch(err) {
console.log(err);
}
}
Now there are 2 issues here:
In login.js, when I click the login button that calls handleClick, and I do console.log(isAuthenticated), it logs false the first time. Any time after that it will log true.
In App.js, isAuthenticated never changes to true, even while login.js will console.log it as true, so the user is never brought to the home page.
I've been struggling with this for a while now, and I just can't figure out what's going wrong here. I think it may have something to do with App.js not rerendering after the user logs in but I'm not sure.
I also have three files handling the authorization context. I don't think these are causing the issue but I will provide the code just in case I'm missing something
AuthContext.js:
import { createContext, useReducer } from "react";
import AuthReducer from "./AuthReducer";
const initialState = {
userID: null,
isAuthenticated: false,
error: false,
}
export const AuthContext = createContext(initialState);
export const AuthContextProvider = ({ children }) => {
const [state, dispatch] = useReducer(AuthReducer, initialState);
return (
<AuthContext.Provider value={{
userID: state.userID,
isAuthenticated: state.isAuthenticated,
error: state.error,
dispatch,
}}>
{children}
</AuthContext.Provider>
)
}
AuthActions.js:
export const LoginStart = (userCredentials) => ({
type: "LOGIN_START",
});
export const LoginSuccess = (userID) => ({
type: "LOGIN_SUCCESS",
payload: userID,
isAuthenticated: true,
});
export const LoginFailure = (error) => ({
type: "LOGIN_FAILURE",
payload: error,
isAuthenticated: false,
});
AuthReducer.js:
const AuthReducer = (state, action) => {
switch(action.type) {
case "LOGIN_START":
return {
userID: null,
isAuthenticated: false,
error: false,
}
case "LOGIN_SUCCESS":
return {
userID: action.payload,
isAuthenticated: true,
error: false,
}
case "LOGIN_FAILURE":
return {
userID: null,
isAuthenticated: false,
error: action.payload,
}
default:
return state;
}
}
export default AuthReducer;
Any help is appreciated, thanks!

I figured this out, I simply had to move the AuthContext Provider out of App.js and into index.js

How can I render only once an Alert component in react native?

How can I render only one time an Alert component in react native if my dashboardScreen is being render many times?
I'm using Context api, if I dispatch an action it causes another render, if I use a useState it causes another render/renders, any idea will be highly appreciate it.
**AppContext.js**
export const AppContext = createContext();
export const AppProvider = ({ children })=> {
const [ state, dispatch ] = useReducer( appReducer, appInicialState);
return (
<AppProvider.Provider value={{
...state,
}}>
{ children }
</AppProvider.Provider>
)
}
**Dashboard.js**
export const Dashboard = () => {
const { state, dispatch } = useContext( AppContext );
const [showAlert, setShowAlert] = useState(true);
const handleCancelPressed = () => {
dispatch({
type: 'cancelPressed',
payload: {
userInfo: false,
}
});
}
const handleAcceptPressed = () => {
dispatch({
type: 'acceptPressed',
payload: {
userInfo: true,
}
});
}
return (
<View style={styles.container}>
{showAlert && (
Alert.alert(
"Alert Title",
"My Alert Msg",
[
{
text: "Cancel",
onPress: handleCancelPressed,
},
{
text: "Ok",
onPress: handleAcceptPressed ,
},
],
{
cancelable: true,
}
);
)}
</View>
)}

useEffect is the way which can solve your problem for rendering it only once.
const [showAlert, setShowAlert] = useState(null);
useEffect(()=>{setShowAlert(true)},[])
The empty bracket denotes that, value for 'showAlert' will be set only once.
You should read useEffect in detail for implementing this properly.
I am not trying this example in any coding environment, I have only shared a proof of concept for you to work upon.
Hope this helps,
Regards,
Shameel Uddin

Why redux state is not render correctly?

Good day, I faced an issue when tried to push the user to the dashboard after the user login correctly but it didn't, here is the code below:
LoginForm.js
const { isLoading, isAuth, error, message } = useSelector(
(state) => state.login
);
const handleSubmit = (e) => {
e.preventDefault();
console.log(values);//values={email:'..', pass:'..'}
if (formValidation()) {
dispatch(NewUserLogin(values));
console.log(isAuth); //print false but in redux state print true
if (isAuth) history.push('/dashboard');
}
};
LoginAction.js
export const NewUserLogin = (formValues) => async (dispatch) => {
try {
dispatch(loginPending());
const { status, message } = await LoginAPIRequest(formValues);
if (status === 'success') {
dispatch(loginSuccess(message));
} else {
dispatch(loginFailure(message));
}
console.log(status);
console.log(message);
} catch (error) {
dispatch(loginFailure(error.message));
}
};
loginSlice.js
import { createSlice } from '#reduxjs/toolkit';
const initialState = {
isLoading: false,
isAuth: false,
error: '',
};
const loginSlice = createSlice({
name: 'Login',
initialState,
reducers: {
loginPending: (state) => {
state.isLoading = true;
},
loginSuccess: (state, { payload }) => {
state.isLoading = false;
state.isAuth = true;
state.message = payload;
state.error = '';
},
loginFailure: (state, { payload }) => {
//actions.payload or shortcut {payload}
state.isLoading = false;
state.error = payload;
},
},
});
const { reducer, actions } = loginSlice;
export const { loginPending, loginSuccess, loginFailure } = actions;
export default reducer;
userAPI.js
import { createEndpointsAPI, ENDPOINTS } from './index';
export const LoginAPIRequest = (formValues) => {
return new Promise(async (resolve, reject) => {
//call api
try {
await createEndpointsAPI(ENDPOINTS.LOGIN)
.create(formValues)
.then((res) => {
resolve(res.data);
if (res.data.status === 'success') {
resolve(res.data);
sessionStorage.setItem('accessJWT', res.data.accessJWT);
localStorage.setItem('sms', JSON.stringify(res.data.refreshJWT));
}
console.log(res.data);
})
.catch((err) => {
reject(err);
});
} catch (error) {
console.log(error);
reject(error);
}
});
};
index.js (root API)
import axios from 'axios';
export const ENDPOINTS = {
LOGIN: 'user/login',
LOGOUT: 'user/logout',
REGISTER: 'user/register',
};
const baseURL = 'http://localhost:3040/v2/';
export const createEndpointsAPI = (endpoint) => {
let url = baseURL + endpoint + '/';
return {
fetchAll: () => axios.get(url),
fetchById: (id) => axios.get(url + id),
create: (newData) => axios.post(url, newData),
update: (updateData, id) => axios.put(url + id, updateData),
delete: (id) => axios.delete(url + id),
};
};
App.js
<MuiThemeProvider theme={theme}>
<CssBaseline />
<Router>
<Switch>
<Route path='/' exact>
<Login />
</Route>
<PrivateRoute path='/dashboard'>
<Dashboard />
</PrivateRoute>
<Route path='*' component={() => '404 NOT FOUND'} />
</Switch>
</Router>
</MuiThemeProvider>
PrivateRoute.js
import { useSelector } from 'react-redux';
const PrivateRoute = ({ component: Component, ...rest }) => {
const { isAuth } = useSelector((state) => state.login);
console.log(isAuth);
return (
<Route
{...rest}
render={(props) => {
isAuth ? (
<Component {...props} />
) : (
<Redirect
to={{
pathname: '/',
state: { from: props.location },
}}
/>
);
}}
/>
);
};
export default PrivateRoute;
The problem is, isAuth is a redux state, it should return true when the user login correctly, but it's not, I console.log(isAuth) and it prints false for the first time even user login correctly, and if I click login one more time it prints true in the console log and redirects the user to the dashboard page. I don't know why isAuth is returned false for the first time when use is login correctly? Please help check the above code from top to bottom, I provide you everythings.

The log: console.log(isAuth); logs a stale closure, you could try an effect on isAuth and redirect when it's true.
Here is an example:
const Component = (propps) => {
const { isLoading, isAuth, error, message } = useSelector(
(state) => state.login
);
const handleSubmit = (e) => {
//...dispatches but doesn't check isAuth
};
useEffect(() => {
//go to dashboard if isAuth is true
if (isAuth) history.push('/dashboard');
}, [isAuth]);//run effect when isAuth changes
};

ReactJS authentication routing component rendering before useEffect hook completes

I'm trying to implement protected pages with Firebase authentication. I created a typical PrivateRoute component that is supposed to only show the page if they're logged in, or redirect users to a login page if they aren't logged in.
I stored the authentication status in a global state using a useEffect hook in App.js. After a lot of reading and research, I understand that the useEffect only completes after the Child component has loaded.
Having said that, I'm at a loss on how to pass authenticated from App to PrivateRoute. With my current code, the authenticated state only registers as true after PrivateRoute has pushed users to the login page. Would appreciate any help.
App.js
//context
const [{user, authenticated}, dispatch] = useStateValue();
useEffect(() => {
auth.onAuthStateChanged((authUser) => {
console.log("THE USER IS >>> ", authUser);
if (authUser) {
dispatch({
type: "SET_USER",
user: authUser,
});
dispatch({
type: "SET_AUTH",
authenticated: true,
})
} else {
// the user is logged out
dispatch({
type: "SET_USER",
user: null,
});
dispatch({
type: "SET_AUTH",
authenticated: false,
})
}
});
}, []);
return (
<Router>
<div className="app">
<PrivateRoute exact isAuth={authenticated} path="/account/create-store" component={CreateAccount} />
</div>
</Router>
)
PrivateRoute.js
import { Route, Redirect } from 'react-router';
import { useStateValue } from './StateProvider';
function PrivateRoute ({ isAuth: isAuth, component: Component, ...rest }) {
const [{authenticated}, dispatch] = useStateValue();
return (
<Route {...rest} render={(props) => {
if (isAuth) {
return <Component />
} else {
return (
<Redirect to={{ pathname:"/login", state: {from: props.location }}} />
);
}
}} />
)
}
export default PrivateRoute
reducer.js
export const initialState = {
user: null,
authenticated: false,
};
const reducer = (state, action) => {
console.log(action)
switch(action.type) {
case "SET_USER":
return {
...state,
user: action.user,
}
case "SET_AUTH":
return {
...state,
authenticated: action.authenticated,
}
default:
return state;
}}
export default reducer;

I can't reproduce your exact problem but I think your PrivateRoute is wrong. Try something like the example bellow.
function PrivateRoute({ isAuth, component: Component, ...rest }) {
if (!isAuth) {
return <Redirect to={{ pathname:"/login", state: {from: props.location }}} />;
}
return <Route component={Component} {...rest} />;
}
export default PrivateRoute;
Use a isLoading state variable so you are not redirected before checking the firebase.auth().onAuthStateChanged.
const [{user, authenticated}, dispatch] = useStateValue();
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
auth.onAuthStateChanged((authUser) => {
console.log("THE USER IS >>> ", authUser);
if (authUser) {
dispatch({
type: "SET_USER",
user: authUser,
});
dispatch({
type: "SET_AUTH",
authenticated: true,
})
} else {
// the user is logged out
dispatch({
type: "SET_USER",
user: null,
});
dispatch({
type: "SET_AUTH",
authenticated: false,
})
}
setIsLoading(false);
});
}, []);
if(isLoading) {
return <div>Loading...</div>
}
return (
<Router>
<div className="app">
<PrivateRoute exact isAuth={authenticated} path="/account/create-store" component={CreateAccount} />
</div>
</Router>
)

React Native setState/useState of an Object

I am new to React Native and don't quite understand the concept of initial states of an object and updating the state when I have more than one property to set.
the error (edit #2):
Objects are not valid as a React child (found: object with keys {userRole}). If you meant to render a collection of children, use an array instead.
App.js
const initialLoginState = {
userRole: null,
userId: null,
};
const [user, setUser] = useState(initialLoginState);
const [isReady, setIsReady] = useState(false);
const restoreUser = async () => {
const user = await authStorage.getUser();
if (user) setUser(user);
};
if (!isReady) {
return (
<AppLoading
startAsync={restoreUser}
onFinish={() => setIsReady(true)}
onError={console.warn}
/>
);
}
//render
return (
<AuthContext.Provider value={{ user, setUser }}>
<NavigationContainer>
{user.userRole ? <ViewTest /> : <AuthNavigator />}
</NavigationContainer>
</AuthContext.Provider>
);
useAuth which updates the user when I received the data:
const logIn = (data, authToken) => {
setUser((prevState) => ({
userRole: {
...prevState.userId,
userRole: data.USERROLE,
},
}));
authStorage.storeToken(data.USERID);
};

You don't need prevState in functional component. user is the prevState before you set new state
const logIn = (data, authToken) => {
setUser({...user, userRole: data.USERROLE});
authStorage.storeToken(data.USERID);
};

Objects are not valid as a React child (found: object with keys {userRole}). If you meant to render a collection of children, use an array instead.
<AuthContext.Provider value={{ user, setUser }}> // <---- the problem is here
<NavigationContainer>
{user.userRole ? <ViewTest /> : <AuthNavigator />}
</NavigationContainer>
</AuthContext.Provider>
I'm not sure what AuthContext.Provider is, but it's trying to render the object(User) as html react elements, make sure you know what sort of data the value prop of that component takes.

I was able to get the right answer with the help of #P.hunter, #Erdenezaya and #Federkun.
The problem was in the state init and setUser().
App.js
const initialLoginState = {
userRole: null,
userId: null,
};
const [user, setUser] = useState({
initialLoginState,
});
const [isReady, setIsReady] = useState(false);
const restoreUser = async () => {
const user = await authStorage.getUser();
if (user) setUser(user);
};
if (!isReady) {
return (
<AppLoading
startAsync={restoreUser}
onFinish={() => setIsReady(true)}
onError={console.warn}
/>
);
}
//syntax error was found in {user.userRole}
return (
<AuthContext.Provider value={{ user, setUser }}>
<NavigationContainer>
{user.userRole ? <ViewTest /> : <AuthNavigator />}
</NavigationContainer>
</AuthContext.Provider>
);
Context functionality for setting the user had to be done like this:
export default useAuth = () => {
const { user, setUser } = useContext(AuthContext);
const logIn = (data, authToken) => {
setUser({ ...user, userRole: data.USERROLE });
authStorage.storeToken(data.USERID);
};
const logOut = () => {
setUser({ ...user, userRole: null });
authStorage.removeToken();
};
return { user, logIn, logOut };
};
Thank you all for your help!