chore: update versions (#304)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

docs/content/docs/reference/nextjs/configuration.mdx

@@ -58,7 +58,7 @@ The logic is the same as in a classic React application:
 import { NextPageContext } from 'next'
 import React from 'react'
 
-import { useAccessToken, useAuthenticated, useUserData } from '@nhost/react'
+import { useAccessToken, useAuthenticated, useUserData } from '@nhost/nextjs'
 
 const ClientSidePage: React.FC = () => {
   const isAuthenticated = useAuthenticated()
@@ -93,7 +93,7 @@ import {
   useAccessToken,
   useAuthenticated,
   useUserData
-} from '@nhost/react'
+} from '@nhost/nextjs'
 
 export async function getServerSideProps(context: NextPageContext) {
   const nhostSession = await getNhostSession('my-app.nhost.run', context)

docs/content/docs/reference/nextjs/index.mdx

@@ -2,7 +2,7 @@
 title: 'Introduction'
 ---
 
-It is possible to use [`@nhost/react`](/reference/react) in any Next.js page that would be configured to render on the client-side.
+All the React hooks and helpers from [`@nhost/react`](/reference/react) are available in Next.js and are exported in the `@nhost/nextjs` package.
 
 When rendering a page from the server-side, Next.js needs to get some information from the client to determine their authentication status. Such communication is only available from cookies, and the Nhost client is designed to enable such a mechanism.
 

docs/content/docs/reference/nextjs/protecting-routes.mdx

@@ -6,13 +6,12 @@ Create a `auth-protected.js` file:
 
 ```jsx
 import { useRouter } from 'next/router'
-import { useAuthLoading, useAuthenticated } from '@nhost/nextjs'
+import { useAuthenticationStatus } from '@nhost/nextjs'
 
 export function authProtected(Comp) {
   return function AuthProtected(props) {
     const router = useRouter()
-    const isLoading = useAuthLoading()
+    const { isLoading, isAuthenticated } = useAuthenticationStatus()
-    const isAuthenticated = useAuthenticated()
 
     if (isLoading) {
       return <div>Loading...</div>

docs/content/docs/reference/react/hooks.mdx

@@ -218,20 +218,19 @@ const Component = () => {
 
 ## Authentication status
 
-### `useAuthLoading`
+### `useAuthenticationStatus`
 
 The Nhost client may need some initial steps to determine the authentication status during startup, like fetching a new JWT from an existing refresh token.
 
-`useAuthLoading` will return `true` until the authentication status is known.
+`isLoading` will return `true` until the authentication status is known.
 
 #### Usage
 
 ```jsx
-import { useAuthLoading, useAuthenticated } from '@nhost/react'
+import { useAuthenticationStatus } from '@nhost/react'
 
 const Component = () => {
-  const isLoading = useAuthLoading()
+  const { isLoading, isAuthenticated } = useAuthenticationStatus()
-  const isAuthenticated = useAuthenticated()
   if (isLoading) return <div>Loading Nhost authentication status...</div>
   else if (isAuthenticated) return <div>User is authenticated</div>
   else return <div>Public section</div>

docs/content/docs/reference/react/protecting-routes.mdx

@@ -8,11 +8,10 @@ You can protect routes by creating an `AuthGate` component when using `@nhost/re
 
 ```jsx
 import { Redirect } from 'react-router-dom'
-import { useAuthLoading, useAuthenticated } from '@nhost/react'
+import { useAuthenticationStatus } from '@nhost/react'
 
 export function AuthGate(children) {
-  const isLoading = useAuthLoading()
+  const { isLoading, isAuthenticated } = useAuthenticationStatus()
-  const isAuthenticated = useAuthenticated()
 
   if (isLoading) {
     return <div>Loading...</div>

examples/nextjs/components/Header.tsx

@@ -7,7 +7,8 @@ export default function Header() {
       <nav>
         <Link href="/">Index</Link> <br />
         <Link href="/second">Second</Link> <br />
-        <Link href="/third">Third</Link> <br />
+        <Link href="/third">SSR auth-guarded page</Link> <br />
+        <Link href="/client-side-auth-guard">CSR auth-guarded page</Link> <br />
       </nav>
     </header>
   )

examples/nextjs/components/protected-route.tsx

@@ -0,0 +1,21 @@
+import { useRouter } from 'next/router'
+
+import { useAuthenticationStatus } from '@nhost/nextjs'
+
+export function authProtected(Comp) {
+  return function AuthProtected(props) {
+    const router = useRouter()
+    const { isLoading, isAuthenticated } = useAuthenticationStatus()
+    console.log('Authentication guard: check auth status', { isLoading, isAuthenticated })
+    if (isLoading) {
+      return <div>Loading...</div>
+    }
+
+    if (!isAuthenticated) {
+      router.push('/')
+      return null
+    }
+
+    return <Comp {...props} />
+  }
+}

examples/nextjs/pages/client-side-auth-guard.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+import { useAccessToken } from '@nhost/nextjs'
+
+import { authProtected } from '../components/protected-route'
+
+const ClientSideAuthPage: React.FC = () => {
+  const accessToken = useAccessToken()
+  return (
+    <div>
+      <h1>Client-side rendered page only accessible to authenticated users</h1>
+      <div>Access token: {accessToken}</div>
+    </div>
+  )
+}
+
+export default authProtected(ClientSideAuthPage)

examples/nextjs/pages/index.tsx

@@ -6,11 +6,11 @@ import {
   useAuthenticated,
   useChangeEmail,
   useChangePassword,
-  useSignInEmailPasswordless,
   useSignInEmailPassword,
-  useSignUpEmailPassword,
+  useSignInEmailPasswordless,
-  useSignOut
+  useSignOut,
-} from '@nhost/react'
+  useSignUpEmailPassword
+} from '@nhost/nextjs'
 import { useAuthQuery } from '@nhost/react-apollo'
 
 import { BOOKS_QUERY } from '../helpers'

examples/nextjs/pages/second.tsx

@@ -1,8 +1,8 @@
 import { NextPageContext } from 'next'
 import React from 'react'
 
-import { getNhostSession, NhostSession } from '@nhost/nextjs'
+import { NhostSession } from '@nhost/core'
-import { useAccessToken, useAuthenticated, useUserData } from '@nhost/react'
+import { getNhostSession, useAccessToken, useAuthenticated, useUserData } from '@nhost/nextjs'
 
 import { BACKEND_URL } from '../helpers'
 

examples/nextjs/pages/third.tsx

@@ -1,9 +1,10 @@
 import { NextPageContext } from 'next'
 import React from 'react'
 
-import { getNhostSession, NhostSession } from '@nhost/nextjs'
+import { NhostSession } from '@nhost/core'
-import { useAccessToken, useAuthenticated } from '@nhost/react'
+import { getNhostSession, useAccessToken } from '@nhost/nextjs'
 
+import { authProtected } from '../components/protected-route'
 import { BACKEND_URL } from '../helpers'
 
 export async function getServerSideProps(context: NextPageContext) {
@@ -17,15 +18,12 @@ export async function getServerSideProps(context: NextPageContext) {
 
 const RefetchPage: React.FC<{ initial: NhostSession }> = () => {
   const accessToken = useAccessToken()
-  const isAuthenticated = useAuthenticated()
-  if (!isAuthenticated) return <div>User it not authenticated </div>
   return (
     <div>
-      <h1>Third page</h1>
+      <h1>SSR page only accessible to authenticated users</h1>
-      User is authenticated: {isAuthenticated ? 'yes' : 'no'}
       <div>Access token: {accessToken}</div>
     </div>
   )
 }
 
-export default RefetchPage
+export default authProtected(RefetchPage)

examples/react-apollo/src/components/auth-gates.tsx

@@ -1,9 +1,8 @@
 import { Navigate, useLocation } from 'react-router-dom'
-import { useAuthenticated, useAuthLoading } from '@nhost/react'
+import { useAuthenticationStatus } from '@nhost/react'
 
 export const AuthGate: React.FC = ({ children }) => {
-  const isAuthenticated = useAuthenticated()
+  const { isLoading, isAuthenticated } = useAuthenticationStatus()
-  const isLoading = useAuthLoading()
   const location = useLocation()
   if (isLoading) {
     return <div>Loading...</div>
@@ -17,8 +16,7 @@ export const AuthGate: React.FC = ({ children }) => {
 }
 
 export const PublicGate: React.FC = ({ children }) => {
-  const isAuthenticated = useAuthenticated()
+  const { isLoading, isAuthenticated } = useAuthenticationStatus()
-  const isLoading = useAuthLoading()
   const location = useLocation()
   if (isLoading) {
     return <div>Loading...</div>

packages/nextjs/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @nhost/nextjs
 
+## 2.0.0
+
+### Patch Changes
+
+- Updated dependencies [39df4d5]
+  - @nhost/react@0.4.0
+
 ## 1.0.1
 
 ### Patch Changes

packages/nextjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/nextjs",
-  "version": "1.0.1",
+  "version": "2.0.0",
   "description": "Nhost NextJS library",
   "license": "MIT",
   "keywords": [

packages/react-apollo/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @nhost/react-apollo
 
+## 5.0.0
+
+### Patch Changes
+
+- Updated dependencies [39df4d5]
+  - @nhost/react@0.4.0
+
 ## 4.0.1
 
 ### Patch Changes

packages/react-apollo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/react-apollo",
-  "version": "4.0.1",
+  "version": "5.0.0",
   "description": "Nhost React Apollo client",
   "license": "MIT",
   "keywords": [

packages/react/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @nhost/react
 
+## 0.4.0
+
+### Minor Changes
+
+- 39df4d5: Deprecate `useAuthLoading` and introduce `useAuthenticationStatus`
+  When using both `useAuthLoading` and `useAuthenticated` together, the hooks rerender independently from each other.
+  As a result, when a user loads the page while he previously authenticated, the hooks values were chronologically:
+
+  | isLoading | isAuthenticated |
+  | --------- | --------------- |
+  | `true`    | `false`         |
+  | `false`   | `false`         |
+  | `false`   | `true`          |
+
+  The intermediate (`false`, `false`) is incorrect and is causing issues when using an authentication gate.
+
+  It is therefore recommended to stop using `useAuthLoading`, and to use `useAuthenticationStatus` instead, in order to keep the loading state and the authentication in sync within the same hook.
+
+  Usage:
+
+  ```js
+  const { isLoading, isAuthenticated } = useAuthenticationStatus()
+  ```
+
+  Fixes [this issue](https://github.com/nhost/nhost/issues/302)
+
 ## 0.3.1
 
 ### Patch Changes

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/react",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Nhost React library",
   "license": "MIT",
   "keywords": [

packages/react/src/hooks/common.ts

@@ -24,18 +24,24 @@ export const useNhostBackendUrl = () => {
   return nhost.auth.client.backendUrl.replace('/v1/auth', '')
 }
 
+/**
+ * @deprecated When using both useAuthLoading and useAuthenticated together, their initial state will change three times: (true,false) -> (false,false) -> (false,true). Use useAuthenticationStatus instead.
+ */
 export const useAuthLoading = () => {
   const service = useAuthInterpreter()
-  const [isLoading, setIsLoading] = useState(!service.status || !service?.state?.hasTag('ready'))
+  return useSelector(service, (state) => !state.hasTag('ready'))
-  useEffect(() => {
+}
-    const subscription = service.subscribe((state) => {
-      const newValue = !state.hasTag('ready')
-      setIsLoading(newValue)
-    })
-    return subscription.unsubscribe
-  }, [service])
 
-  return isLoading
+export const useAuthenticationStatus = () => {
+  const service = useAuthInterpreter()
+  return useSelector(
+    service,
+    (state) => ({
+      isAuthenticated: state.matches({ authentication: 'signedIn' }),
+      isLoading: !state.hasTag('ready')
+    }),
+    (a, b) => a.isAuthenticated === b.isAuthenticated && a.isLoading === b.isLoading
+  )
 }
 
 export const useAuthenticated = () => {

packages/react/src/hooks/deprecated.ts

@@ -1,14 +1,13 @@
 import { useMemo } from 'react'
 
-import { useAuthenticated, useAuthLoading } from './common'
+import { useAuthenticationStatus } from './common'
 import { useUserData } from './user'
 
 /**
- * @deprecated This hooks ensures backward compatibility with `@nhost/react-auth`, which is deprecated
+ * @deprecated This hook ensures backward compatibility with `@nhost/react-auth`, which is deprecated
  */
 export const useNhostAuth = () => {
-  const isLoading = useAuthLoading()
+  const { isLoading, isAuthenticated } = useAuthenticationStatus()
-  const isAuthenticated = useAuthenticated()
   const user = useUserData()
   return useMemo(() => ({ isLoading, isAuthenticated, user }), [isLoading, isAuthenticated, user])
 }

packages/react/src/hooks/registration.ts

@@ -3,7 +3,7 @@ import { useMemo } from 'react'
 import { SignUpOptions } from '@nhost/core'
 import { useSelector } from '@xstate/react'
 
-import { useAuthenticated, useAuthInterpreter, useAuthLoading } from './common'
+import { useAuthenticationStatus, useAuthInterpreter } from './common'
 
 export const useSignUpEmailPassword = (
   stateEmail?: string,
@@ -18,8 +18,7 @@ export const useSignUpEmailPassword = (
     (state) => state.context.errors.registration,
     (a, b) => a?.error === b?.error
   )
-  const loading = useAuthLoading()
+  const { isLoading: loading, isAuthenticated: isSuccess } = useAuthenticationStatus()
-  const isSuccess = useAuthenticated()
   const isLoading = useMemo(() => loading && !isSuccess, [loading, isSuccess])
   const needsEmailVerification =
     !!service.status &&