From d20b00061ec84407dc06d693326433ae2e4fb015 Mon Sep 17 00:00:00 2001
From: Copple <10214025+kiwicopple@users.noreply.github.com>
Date: Thu, 9 Sep 2021 19:47:04 +0800
Subject: [PATCH] adds a description for our auth section

---
 web/docs/guides/auth/intro.mdx | 23 ++++++++++++++++++++++-
 web/src/data/authProviders.js  | 11 ++++++++++-
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/web/docs/guides/auth/intro.mdx b/web/docs/guides/auth/intro.mdx
index 9921c3ec26e..a600bf0a378 100644
--- a/web/docs/guides/auth/intro.mdx
+++ b/web/docs/guides/auth/intro.mdx
@@ -1,7 +1,9 @@
 ---
 id: intro
 title: Supabase Auth
+sidebar_label: Introduction
 description: Use Supabase to Authenticate and Authorize your users.
+# hide_table_of_contents: true
 ---
 
 import Link from '@docusaurus/Link'
@@ -9,7 +11,21 @@ import Tabs from '@theme/Tabs'
 import TabItem from '@theme/TabItem'
 import providers from '@site/src/data/authProviders'
 
-<div class="container" style={{}}>
+Supabase Auth is designed to work with Postgres. There are two parts to every Auth system:
+
+- Authentication: should this person be allowed in? If yes, who are they?
+- Authorization: once they are in, what are they allowed to do?
+
+## Authentication
+
+You can authenticate your users in several ways:
+
+- Email & password.
+- Magic links (one-click logins).
+- Social providers.
+- Phone logins.
+
+<div class="container" style={{ padding: 0 }}>
   <div class="row is-multiline">
     {providers.map((x) => (
       <div key={x.name} class="col col--4">
@@ -44,3 +60,8 @@ import providers from '@site/src/data/authProviders'
     ))}
   </div>
 </div>
+
+
+## Authorization
+
+- TBD
\ No newline at end of file
diff --git a/web/src/data/authProviders.js b/web/src/data/authProviders.js
index dbaadd482bc..2f721055309 100644
--- a/web/src/data/authProviders.js
+++ b/web/src/data/authProviders.js
@@ -8,6 +8,15 @@ const authProviders = [
     platform: true,
     selfHosted: true,
   },
+  {
+    name: 'Magic Links',
+    // logo: '/img/libraries/dart-icon.svg',
+    href: '/docs/guides/auth/auth-apple',
+    official: true,
+    supporter: 'Supabase',
+    platform: true,
+    selfHosted: true,
+  },
   {
     name: 'Apple',
     // logo: '/img/libraries/dart-icon.svg',
@@ -99,7 +108,7 @@ const authProviders = [
     selfHosted: true,
   },
   {
-    name: 'Messagebird',
+    name: 'MessageBird',
     // logo: '/img/libraries/dart-icon.svg',
     href: '/docs/guides/auth/auth-twilio',
     official: false,