To be honest I avoided using Context for a long time. I easily began to use hooks, but I did not immediately understand Сontext. In this article I will show you one way to use Context.
const App = () => {
<Switch>
<Route path=”/profile” component={ProfilePage} />
<Route path=”/login” component={LoginPage} />
<Redirect to=”/login” />
</Switch>
};
Let's restrict access to the ProfilePage - only authenticated users can access this page. If the user is a guest, we redirect him to the login page.
const LoginPage = () => {
const [redirectTo, setRedirectTo] = useState(null);
const submitHandler = e => {
e.preventDefault();
const formData = new FormData(e.target);
authenticate(formData).then(user => {
if (user.authenticated) {
this.setState({ redirectTo: ‘/profile’ });
}
});
}
if (redirectTo) {
return (
<Redirect to={redirectTo} />
);
}
return (
<Form omSubmit={submitHandler}>
<Form.Input required type=”email” name=”email” label=”Email” />
<Form.Input required type=”password” name=”password” label=”Password” />
<Form.Button type=”submit” />
</Form>
);
};
The authenticate method sends user credentials to the API. When we get a response, we redirect the user to the ProfilePage. All is well, except for one trifle - everyone can access to the ProfilePage without authentication. To fix this, we need a flag - a global variable - to indicate whether the user is authenticated or not. Let's create Context that allows us to send a flag to components.
import React, { useState } from ‘react’;
export const AuthContext = React.createContext();
export const AuthProvider = ({ children }) => {
const [authenticated, setAuthenticated] = useState(false);
return (
<AuthContext.Provider value={{authenticated, setAuthenticated}}>
{children}
</AuthContext.Provider>
);
};
export const AuthConsumer = AuthContext.Consumer;
Go to the App.js file and wrap the Switch into the AuthProvider. AuthContext.Provider allows us to pass the context value - the authenticated flag and the setAuthenticated method - to all child components.
import { AuthProvider } from ‘./authContext’;
const App = () => {
<AuthProvider>
<Switch>
<Route path=”/profile” component={ProfilePage} />
<Route path=”/login” component={LoginPage} />
<Redirect to=”/login” />
</Switch>
<AuthProvider>
};
And make changes to the LoginPage.
import React, { useState, useContext } from ‘react’;
import { AuthContext } from ‘./authContext’;
const LoginPage = () => {
const context = useContext(AuthContext);
const [redirectTo, setRedirectTo] = useState(null);
const submitHandler = e => {
e.preventDefault();
const formData = new FormData(e.target);
authenticate(formData).then(user => {
context.setAuthenticated(true);
Now we just have to subscribe to the changes and send off a guest.
import { AuthConsumer } from ‘./authContext’;
const ProtectedRoute = ({ component: Component, ...rest }) => (
<Route {...rest} render={matchProps => (
<AuthConsumer>
{value => (
<Fragment>
{value.authenticated || (
<Redirect to=”/login” />
)}
<Component {...matchProps} />
</Fragment>
)}
</AuthConsumer>
)} />
);
Consumer is a React component, that subscribes to Context changes. It takes the function as a child and passes the current Context value to it.
Finishing touch.
import { AuthProvider } from ‘./authContext’;
import { ProtectedRoute } from’./ProtectedRoute’;
const App = () => {
<AuthProvider>
<Switch>
<ProtectedRoute path=”/profile” component={ProfilePage} />
<Route path=”/login” component={LoginPage} />
<Redirect to=”/login” />
</Switch>
<AuthProvider>
};
Top comments (0)