Adds a react quickstart

apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts

@@ -292,6 +292,10 @@ export const auth = {
       name: 'Overview',
       url: '/guides/auth/overview',
     },
+    {
+      name: 'Quickstarts',
+      items: [{ name: 'Auth with React', url: '/guides/auth/quickstarts/react', items: [] }],
+    },
     {
       name: 'Authentication',
       url: undefined,

apps/docs/pages/guides/auth/quickstarts/react.mdx

@@ -0,0 +1,133 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+import StepHikeCompact from '~/components/StepHikeCompact'
+
+export const meta = {
+  title: 'Use Supabase Auth with React',
+  subtitle: 'Learn how to Supabase Auth with React.js.',
+  breadcrumb: 'Auth Quickstarts',
+}
+
+<StepHikeCompact>
+
+  <StepHikeCompact.Step step={1}>
+    <StepHikeCompact.Details title="Create a new Supabase project">
+
+    [Launch a new project](https://app.supabase.com) in the Supabase Dashboard.
+
+    Your new database has a table for storing your users. You can see that this table is currently empty by running some SQL in the [SQL Editor](https://app.supabase.com/project/_/sql).
+
+    </StepHikeCompact.Details>
+
+    <StepHikeCompact.Code>
+
+     ```sql SQL_EDITOR
+      select * from auth.users;
+      ````
+
+    </StepHikeCompact.Code>
+
+  </StepHikeCompact.Step>
+
+  <StepHikeCompact.Step step={2}>
+
+    <StepHikeCompact.Details title="Create a React app">
+
+    Create a React app using the `create-react-app` command.
+
+    </StepHikeCompact.Details>
+
+    <StepHikeCompact.Code>
+
+      ```bash Terminal
+      npx create-react-app my-app
+      ```
+
+    </StepHikeCompact.Code>
+
+  </StepHikeCompact.Step>
+
+  <StepHikeCompact.Step step={3}>
+    <StepHikeCompact.Details title="Install the Supabase client library">
+
+    The fastest way to get started is to use Supabase's `auth-ui-react` library which provides a convenient interface for working with Supabase Auth from a React app.
+
+    Navigate to the React app and install the Supabase libraries.
+
+    </StepHikeCompact.Details>
+
+    <StepHikeCompact.Code>
+
+      ```bash Terminal
+      cd my-app && npm install @supabase/supabase-js @supabase/auth-ui-react
+      ```
+
+    </StepHikeCompact.Code>
+
+  </StepHikeCompact.Step>
+
+  <StepHikeCompact.Step step={4}>
+    <StepHikeCompact.Details title="Set up your login component">
+
+    In `index.js`, create a Supabase client using your [Project URL and public API (anon) key](https://app.supabase.com/project/_/settings/api).
+
+    You can configure the Auth component to display whenever there is no session inside `supabase.auth.getSession()`
+
+    </StepHikeCompact.Details>
+    <StepHikeCompact.Code>
+
+
+      ```js src/index.js
+        import './index.css'
+        import { useState, useEffect } from 'react'
+        import { createClient } from '@supabase/supabase-js'
+        import { Auth, ThemeSupa } from '@supabase/auth-ui-react'
+
+        const supabase = createClient('https://<project>.supabase.co', '<your-anon-key>')
+
+        export default function App() {
+          const [session, setSession] = useState(null)
+
+          useEffect(() => {
+            supabase.auth.getSession().then(({ data: { session } }) => {
+              setSession(session)
+            })
+
+            supabase.auth.onAuthStateChange((_event, session) => {
+              setSession(session)
+            })
+          }, [])
+
+          if (!session) {
+            return (<Auth supabaseClient={supabase} appearance={{ theme: ThemeSupa }} />)
+          }
+          else {
+            return (<div>Logged in!</div>)
+          }
+        }
+      ```
+
+    </StepHikeCompact.Code>
+
+  </StepHikeCompact.Step>
+
+  <StepHikeCompact.Step step={5}>
+    <StepHikeCompact.Details title="Start the app">
+
+    Start the app, go to http://localhost:3000 in a browser, and open the browser console and you should be able to log in.
+
+    </StepHikeCompact.Details>
+
+    <StepHikeCompact.Code>
+
+      ```bash Terminal
+      npm start
+      ```
+
+    </StepHikeCompact.Code>
+
+  </StepHikeCompact.Step>
+</StepHikeCompact>
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} hideToc={true} />
+
+export default Page

package-lock.json

@@ -46189,7 +46189,7 @@
         "@sinclair/typebox": "^0.25.1",
         "pg": "^8.7.1",
         "pg-format": "^1.0.4",
-        "pgsql-parser": "13.4.0",
+        "pgsql-parser": "^13.3.0",
         "postgres-array": "^3.0.1",
         "prettier": "^2.6.0",
         "prettier-plugin-sql": "^0.12.1"