From d1634e7e6675fe6c4e2b341c4c4dc89ee47b976c Mon Sep 17 00:00:00 2001
From: Copple <10214025+kiwicopple@users.noreply.github.com>
Date: Wed, 1 Mar 2023 15:31:54 +0100
Subject: [PATCH] Adds a react quickstart

---
 .../NavigationMenu.constants.ts               |   4 +
 .../pages/guides/auth/quickstarts/react.mdx   | 133 ++++++++++++++++++
 package-lock.json                             |   2 +-
 3 files changed, 138 insertions(+), 1 deletion(-)
 create mode 100644 apps/docs/pages/guides/auth/quickstarts/react.mdx

diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
index 11043ca46c4..0d088c00d05 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
+++ b/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,
diff --git a/apps/docs/pages/guides/auth/quickstarts/react.mdx b/apps/docs/pages/guides/auth/quickstarts/react.mdx
new file mode 100644
index 00000000000..f47e374a48c
--- /dev/null
+++ b/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
diff --git a/package-lock.json b/package-lock.json
index dbf8afff773..fa926877ce0 100644
--- a/package-lock.json
+++ b/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"