nhost / react-auth

For easy usage of Auth with Nhost

Nhost

Quickstart   •   Website   •   Docs   •   Blog   •   Twitter   •   Discord

---

Nhost is an open source Firebase alternative with GraphQL, built with the following things in mind:

• Open Source
• GraphQL
• SQL
• Great Developer Experience

Nhost consists of open source software:

• Database: PostgreSQL
• Instant GraphQL API: Hasura
• Authentication: Hasura Auth
• Storage: Hasura Storage
• Serverless Functions: Node.js (JavaScript and TypeScript)
• Nhost CLI for local development

Architecture of Nhost

Visit https://docs.nhost.io for the complete documentation.

Get Started

Option 1: Nhost Hosted Platform

1. Sign in to Nhost.
2. Create Nhost app.
3. Done.

Option 2: Self-hosting

Since Nhost is 100% open source, you can self-host the whole Nhost stack. Check out the example docker-compose file to self-host Nhost.

Sign In and Make a Graphql Request

Install the @nhost/nhost-js package and start build your app:

import { NhostClient } from '@nhost/nhost-js'

const nhost = new NhostClient({
  subdomain: '<your-subdomain>',
  region: '<your-region>'
})

await nhost.auth.signIn({ email: '[email protected]', password: 'spaceX' })

await nhost.graphql.request(`{
  users {
    id
    displayName
    email
  }
}`)

Frontend Agnostic

Nhost is frontend agnostic, which means Nhost works with all frontend frameworks.

Resources

• Start developing locally with the Nhost CLI

Nhost Clients

• JavaScript/TypeScript
• Dart and Flutter
• React
• Next.js
• Vue

Integrations

• Apollo
• React Apollo
• React URQL
• Stripe GraphQL API
• Google Translation GraphQL API

Applications

• Dashboard
• Docs

Community ❤️

First and foremost: Star and watch this repository to stay up-to-date.

Also, follow Nhost on GitHub Discussions, our Blog, and on Twitter. You can chat with the team and other members on Discord and follow our tutorials and other video material at YouTube.

Nhost is Open Source

This repository, and most of our other open source projects, are licensed under the MIT license.

How to contribute

Here are some ways of contributing to making Nhost better:

• Try out Nhost, and think of ways to make the service better. Let us know here on GitHub.
• Join our Discord and connect with other members to share and learn from.
• Send a pull request to any of our open source repositories on Github. Check our contribution guide and our developers guide for more details about how to contribute. We're looking forward to your contribution!

Contributors

react-auth's Issues

Make it possible to get the user object using useAuth hook

const { user: {email, display_name }} = useAuth()

The useNhostAuth hook returning wrong value

Hi! I just tried the new version 2. I noticed the useNhostAuth hook returning value isAuthenticated true, while im never logged in (tried in private browser). But when im using auth.isAuthenticated() from nhost-js-sdk it was false. I dont know if it is intended or not.

const nhost = useNhostAuth();
console.log(
"🚀 ~ file: User.tsx ~ line 94 ~ useNhostAuthEnchanced ~ from useNhostAuth hook",
nhost
);
const isAuthenticated = auth.isAuthenticated();
console.log(
"🚀 ~ file: User.tsx ~ line 102 ~ useNhostAuthEnchanced ~ from nhost-js-sdk auth.isAuthenticated()",
isAuthenticated
);
const getJWTToken = auth.getJWTToken();
console.log(
"🚀 ~ file: User.tsx ~ line 104 ~ useNhostAuthEnchanced ~ from nhost-js-sdk auth.getJWTToken",
getJWTToken
);

Next.js "PrivateRoute" issue

Following on from nhost/react-apollo#4

With the current setup, the <NHostAuthProvider> component requires Next.js users to wrap any pages where they are using useQuery, useMutation or useSubscription with a PrivateRoute HOC (e.g https://github.com/nhost-examples/nextjs-apollo/blob/main/components/private-route.jsx)

Currently this component is only available in the Nhost examples. One option could be to export the PrivateRoute component directly from @nhost/react-auth

However, I think this still leads to a not great developer experience, because it requires wrapping the pages in the HOC every time

@elitan raised the point on the other issue:

I think the reason why official Next.js + Apollo examples does not use a similar PrivateRoute approach is because it does not handle auth.

I am not 100% sure, but I think it's definitely possible to handle auth + Apollo with Next.js, without the wrapper approach (see this official example)

If we want to keep the HOC strategy, I also agree that the name PrivateRoute could be improved. Maybe AuthProtected or WithAuthProtection 🤷‍♂️

user prop always null when using useNhostAuth hook

While using a component inside the NhostAuthProvider and using const { user } = useNhostAuth() the user is always null.

I can login and the isAuthenticated is true but the user is null.

@nhost/react-auth 2.0.3