diff --git a/about/static/favicon.ico b/about/static/favicon.ico index d3fca2acb10..5c4d1dcc5cf 100644 Binary files a/about/static/favicon.ico and b/about/static/favicon.ico differ diff --git a/about/static/favicon.png b/about/static/favicon.png deleted file mode 100644 index e217fec5c6b..00000000000 Binary files a/about/static/favicon.png and /dev/null differ diff --git a/studio/components/to-be-cleaned/Docs/Pages/UserManagement.js b/studio/components/to-be-cleaned/Docs/Pages/UserManagement.js index 613f5934a67..de87177be1a 100644 --- a/studio/components/to-be-cleaned/Docs/Pages/UserManagement.js +++ b/studio/components/to-be-cleaned/Docs/Pages/UserManagement.js @@ -156,7 +156,7 @@ export default function UserManagement({ autoApiService, selectedLang, showApiKe

- Users can log in with Google, Facebook, Gitlab, Github, Azure, or Bitbucket. You must + Users can log in with Third Party OAuth like Google, Facebook, Github, and more. You must first enable each of these in the{' '} @@ -166,9 +166,7 @@ export default function UserManagement({ autoApiService, selectedLang, showApiKe tab.

- provider can be google, gitlab,{' '} - azure, facebook, github, or{' '} - bitbucket + Vew all the available Third Part OAuth providers

After they have logged in, all interactions using the Supabase JS client will be diff --git a/web/docs/guides/auth/auth-notion.mdx b/web/docs/guides/auth/auth-notion.mdx new file mode 100644 index 00000000000..051d6aed07a --- /dev/null +++ b/web/docs/guides/auth/auth-notion.mdx @@ -0,0 +1,97 @@ +--- +id: auth-notion +title: 'Login with Notion' +description: Add Notion OAuth to your Supabase project +--- + +import Tabs from '@theme/Tabs' +import TabItem from '@theme/TabItem' + +To enable Notion Auth for your project, you need to set up a Notion Application and add the Application OAuth credentials to your Supabase Dashboard. + +## Overview + +Setting up Notion logins for your application consists of 3 parts: + +- Create and configure a Notion Application [Notion Developer Portal](https://www.notion.so/my-integrations) +- Add your Notion OAuth Consumer keys to your [Supabase Project](https://app.supabase.io) +- Add the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js) + +## Steps + +### Access your Notion account + +- Go to [notion.so](https://notion.so/). +- Click on `Login` at the top right to log in. + +![notion.so](/img/guides/auth-notion/notion.png) + +- Once logged in, go to [notion.so/my-integrations](https://notion.so/my-integrations). + +![notion.so](/img/guides/auth-notion/notion-developer.png) + +### Find your callback URL + +In the next step you require a callback URL, which looks like this: + +`https://.supabase.co/auth/v1/callback` + +- Go to your [Supabase Project Dashboard](https://app.supabase.io). +- Click on the `Settings` icon at the bottom of the left sidebar. +- Click on `API` in the list. +- Under Config / URL you'll find your API URL, you can click `Copy` to copy it to the clipboard. +- Now just add `/auth/v1/callback` to the end of that to get your full `OAuth Redirect URI`. + + + +### Create a Notion Application + +- Click on `New integration` in the center of the screen. +- Enter the name of your application and click `Submit`. + +### Add your Notion credentials into your Supabase Project + +- Go to your [Supabase Project Dashboard](https://app.supabase.io) +- In the left sidebar, click the `Authentication` icon (near the top) +- Click `Settings` from the list to go to the `Authentication Settings` page +- Enter the final (hosted) URL of your app under `Site URL` (this is important) +- Under `External OAuth Providers` turn `Notion Enabled` to ON +- Enter your `Internal Integration Token` saved in the previous step +- Click `Save` + +### Add login code to your client app + +The JavaScript client code is documented here: [Supabase OAuth Client Code](/docs/reference/javascript/auth-signin#sign-in-using-third-party-providers) + +```js +const { user, session, error } = await supabase.auth.signIn({ + provider: 'notion', +}) +``` + +Add this function which you can call from a button, link, or UI element. + +```js +async function signInWithNotion() { + const { user, session, error } = await supabase.auth.signIn({ + provider: 'notion', + }) +} +``` + +To log out: + +```js +async function signout() { + const { error } = await supabase.auth.signOut() +} +``` + +## Resources + +- [Supabase Account - Free Tier OK](https://supabase.com) +- [Supabase JS Client](https://github.com/supabase/supabase-js) +- [Notion Account](https://Notion.com) +- [Notion Developer Portal](https://Notion.com/developers) diff --git a/web/docs/guides/integrations/appsmith.mdx b/web/docs/guides/integrations/appsmith.mdx index 21b346d012c..9d8e6440942 100644 --- a/web/docs/guides/integrations/appsmith.mdx +++ b/web/docs/guides/integrations/appsmith.mdx @@ -1,4 +1,8 @@ -# Supabase Integration Doc +--- +id: appsmith +title: 'Appsmith' +description: 'Get started with Supabase and Appsmith, an open-source framework for building internal tools.' +--- This guide explains how to quickly build a Support Dashboard by connecting a Supabase back-end to an Appsmith front-end. diff --git a/web/sidebars.js b/web/sidebars.js index de572786ed5..507f8d18b08 100755 --- a/web/sidebars.js +++ b/web/sidebars.js @@ -129,13 +129,14 @@ module.exports = { 'guides/auth/auth-github', 'guides/auth/auth-gitlab', 'guides/auth/auth-google', + 'guides/auth/auth-notion', 'guides/auth/auth-slack', 'guides/auth/auth-spotify', - 'guides/auth/auth-twitter', 'guides/auth/auth-twitch', - 'guides/auth/auth-zoom', + 'guides/auth/auth-twitter', 'guides/auth/auth-twilio', 'guides/auth/auth-messagebird', + 'guides/auth/auth-zoom', ], }, { diff --git a/web/spec/supabase.yml b/web/spec/supabase.yml index 25c6d0bb9d4..e76abfd706b 100644 --- a/web/spec/supabase.yml +++ b/web/spec/supabase.yml @@ -515,11 +515,11 @@ pages: }) ``` - name: Sign in using third-party providers. - description: Supabase supports OAuth logins. + description: Supabase supports many different [third-party providers](https://supabase.com/docs/guides/auth#providers). js: | ```js const { user, session, error } = await supabase.auth.signIn({ - // provider can be 'github', 'google', 'gitlab', or 'bitbucket' + // provider can be 'github', 'google', 'gitlab', and more provider: 'github' }) ``` diff --git a/web/src/data/authProviders.js b/web/src/data/authProviders.js index 98fe6f4b629..1c1dbac7a12 100644 --- a/web/src/data/authProviders.js +++ b/web/src/data/authProviders.js @@ -98,6 +98,15 @@ const authProviders = [ platform: true, selfHosted: true, }, + { + name: 'Notion', + // logo: '/img/libraries/notion-icon.svg', + href: '/docs/guides/auth/auth-notion', + official: true, + supporter: 'Supabase', + platform: true, + selfHosted: true, + }, { name: 'Slack', // logo: '/img/libraries/dart-icon.svg', diff --git a/web/static/humans.txt b/web/static/humans.txt index aaa75399013..914b1492c77 100644 --- a/web/static/humans.txt +++ b/web/static/humans.txt @@ -11,9 +11,6 @@ Chris Copplestone Dave Wilson David Thyresson Div Arora -Erkin -Francesco Ceccon -Gurjeet Singh https://gurjeet.singh.im Hieu Pham Inian P Isaiah Hamilton @@ -29,7 +26,6 @@ Mark Burggraf Oli R Paul Copplestone Rory Wilding -Shakeel-Abbas Hussein Stanislav M Steve Chavez Thor Schaeff @@ -56,4 +52,4 @@ Supabase would not be possible without the work of some other amazing open sourc - Tailwind CSS - https://tailwindcss.com/ - Phoenix - https://www.phoenixframework.org/ - Docusaurus - https://v2.docusaurus.io/ -- GoAuth - https://github.com/netlify/gotrue +- GoTrue - https://github.com/netlify/gotrue diff --git a/web/static/img/guides/auth-notion/notion-developer.png b/web/static/img/guides/auth-notion/notion-developer.png new file mode 100644 index 00000000000..5be5f04d046 Binary files /dev/null and b/web/static/img/guides/auth-notion/notion-developer.png differ diff --git a/web/static/img/guides/auth-notion/notion.png b/web/static/img/guides/auth-notion/notion.png new file mode 100644 index 00000000000..0365a5e8366 Binary files /dev/null and b/web/static/img/guides/auth-notion/notion.png differ diff --git a/www/components/AuthWidget/AuthComponentExample.tsx b/www/components/AuthWidget/AuthComponentExample.tsx index 09850bbd4f8..19ebdf97b77 100644 --- a/www/components/AuthWidget/AuthComponentExample.tsx +++ b/www/components/AuthWidget/AuthComponentExample.tsx @@ -1,16 +1,35 @@ import { useState } from 'react' import { createClient } from '@supabase/supabase-js' -import { Button, Card, Auth, Space, Tabs, Typography, IconCode, IconSearch } from '@supabase/ui' +import { + Badge, + Button, + Card, + Auth, + Space, + Tabs, + Typography, + IconCode, + IconSearch, +} from '@supabase/ui' import CodeBlock from '../CodeBlock/CodeBlock' // Import Swiper React components import { Swiper, SwiperSlide } from 'swiper/react' +import Link from 'next/link' +import { useRouter } from 'next/router' const supabase = createClient( 'https://rsnibhkhsbfnncjmwnkj.supabase.co', 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyb2xlIjoiYW5vbiIsImlhdCI6MTYxNTIxNDE1MywiZXhwIjoxOTMwNzkwMTUzfQ.OQEbAaTfgDdLCCht251P2JRD3QDnui6nsU8N-tZA_Mc' ) -function AuthComponentExample() { +type Props = { + darkMode: boolean +} + +function AuthComponentExample(props: Props) { + const { darkMode } = props + const { basePath } = useRouter() + // store API swiper instance const [imageSwiper, setImageSwiper] = useState(undefined) const [imageSwiperActiveIndex, setImageSwiperActiveIndex] = useState(0) @@ -67,22 +86,119 @@ function AuthComponentExample() {

- +
- + Logo {'Acme Company'} + Demo +
+ Sign in with +
+ + + + + + + + + + + + + + + + + + + +
+
+
+ + or continue with + +
- + diff --git a/www/pages/auth/Auth.tsx b/www/pages/auth/Auth.tsx index 570a6d3f6ab..690d4c66f3f 100644 --- a/www/pages/auth/Auth.tsx +++ b/www/pages/auth/Auth.tsx @@ -29,7 +29,13 @@ import APISection from '~/components/Sections/APISection' import GithubExamples from '~/components/Sections/GithubExamples' import ProductHeader from '~/components/Sections/ProductHeader' -function AuthPage() { +type Props = { + darkMode: boolean +} + +function AuthPage(props: Props) { + const { darkMode } = props + // base path for images const { basePath } = useRouter() @@ -322,7 +328,7 @@ function AuthPage() {
- +