Make it easy to use Authentication with your Nhost project.
@nhost/react-auth
exposes one component: NhostAuthProvider
. Wrap your whole App around this component to manage if users are logged in or not.
It's recommended to use @nhost/react-auth
with @nhost/react-apollo
and nhost-js-sdk
for users to login and interact with the GraphQL API.
npm install @nhost/react-auth@v1.0.5
See full Nhost Create React App with Apollo.
import React from "react";
import ReactDOM from "react-dom";
import { NhostAuthProvider } from "@nhost/react-auth";
import { NhostApolloProvider } from "@nhost/react-apollo";
import { auth } from "utils/nhost";
import App from "./App";
ReactDOM.render(
<React.StrictMode>
<NhostAuthProvider auth={auth}>
<NhostApolloProvider
auth={auth}
gqlEndpoint={`https://hasura-REPLACE.nhost.app/v1/graphql`}
>
<App />
</NhostApolloProvider>
</NhostAuthProvider>
</React.StrictMode>,
document.getElementById("root")
);
First, we'll create an AuthGate
component. Only logged-in users are allowed through this component.
import React from "react";
import { Redirect } from "react-router-dom";
import { useAuth } from "@nhost/react-auth";
export function AuthGate({ children }) {
const { signedIn } = useAuth();
if (signedIn === null) {
return <div>Loading...</div>;
}
if (!signedIn) {
return <Redirect to="/login" />;
}
// user is logged-in
return children;
}
We'll wrap routes that we want to protect for logged-in users only using this component. In the example below, only logged-in users are allowed to access the /
-route.
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import { NhostAuthProvider } from '@nhost/react-auth";
import { NhostApolloProvider } from "@nhost/react-apollo";
import { auth } from "utils/nhost";
import { AuthGate } from "components/auth-gate"
import App from "./App";
ReactDOM.render(
<React.StrictMode>
<NhostAuthProvider auth={auth}>
<NhostApolloProvider
auth={auth}
gqlEndpoint={`https://hasura-REPLACE.nhost.app/v1/graphql`}
>
<Router>
<Switch>
<Route exact path="/login">
<Login />
</Route>
<AuthGate>
<Route exact path="/">
<App />
</Route>
</AuthGate>
</Switch>
</Router>
</NhostApolloProvider>
</NhostAuthProvider>
</React.StrictMode>,
document.getElementById("root")
);
See full Nhost Next.js with Apollo.
import { NhostAuthProvider } from "@nhost/react-auth";
import { NhostApolloProvider } from "@nhost/react-apollo";
import { auth } from "utils/nhost";
function MyApp({ Component, pageProps }) {
return (
<NhostAuthProvider auth={auth}>
<NhostApolloProvider
auth={auth}
gqlEndpoint={`https://hasura-REPLACE.nhost.app/v1/graphql`}
>
<Component {...pageProps} />
</NhostApolloProvider>
</NhostAuthProvider>
);
}
export default MyApp;
First we'll create a PrivateRoute
component. We'll wrap pages that only logged in users are allowed to access.
import { useAuth } from "@nhost/react-auth";
export function PrivateRoute(Component) {
return () => {
const { signedIn } = useAuth();
// wait to see if the user is logged in or not.
if (signedIn === null) {
return <div>Checking auth...</div>;
}
if (!signedIn) {
return <div>Login form or redirect to `/login`.</div>;
}
return (<Component {...arguments} />);
};
}
import { PrivateRoute } from "components/private-route";
function Home() {
return <div>My dashboard</div>;
}
export default PrivateRoute(Dashboard);