adds a description for our auth section

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

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,