@nhost/react-auth

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.

#Install

npm install @nhost/react-auth@v1.0.5

#Create React App

Setup

See full Nhost Create React App with Apollo.

src/index.js
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")
);

Usage

First, we'll create an AuthGate component. Only logged-in users are allowed through this component.

src/components/auth-gate.js
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.

src/index.js
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") );

#Next.js

See full Nhost Next.js with Apollo.

Setup

pages/_app.js
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;

Usage

First we'll create a PrivateRoute component. We'll wrap pages that only logged in users are allowed to access.

components/private-route.jsx
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} />);
  };
}

Usage

pages/index.js
import { PrivateRoute } from "components/private-route";

function Home() {
  return <div>My dashboard</div>;
}

export default PrivateRoute(Dashboard);