dima/supabase
1
0 Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-10-05 17:35:10 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into doc/oauth-zoom

Browse Source
This commit is contained in:
Kiran K authored and GitHub committed 2022-01-29 11:37:26 +05:30
2 parents 8278488253 65e8f6a303
commit fae96a53d4
13 files changed
+254 -27
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

about/static/favicon.ico
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

about/static/favicon.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 17 KiB

studio/components/to-be-cleaned/Docs/Pages/UserManagement.js
+2 -4
View File
@@ -156,7 +156,7 @@ export default function UserManagement({ autoApiService, selectedLang, showApiKe
<div className="doc-section ">
<article className="text ">
<p>
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{' '}
<span className="text-green-500">
<Link key={'AUTH'} href={`/project/${router.query.ref}/auth/settings`}>
@@ -166,9 +166,7 @@ export default function UserManagement({ autoApiService, selectedLang, showApiKe
tab.
</p>
<p>
<code>provider</code> can be <code>google</code>, <code>gitlab</code>,{' '}
<code>azure</code>, <code>facebook</code>, <code>github</code>, or{' '}
<code>bitbucket</code>
Vew all the available <a href='https://supabase.com/docs/guides/auth#providers' target='_blank'>Third Part OAuth providers</a>
</p>
<p>
After they have logged in, all interactions using the Supabase JS client will be
web/docs/guides/auth/auth-notion.mdx
+97
View File
@@ -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://<project-ref>.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`.
<video width="99%" muted playsInline controls="true">
<source src="/docs/videos/api/api-url-and-key.mp4" type="video/mp4" muted playsInline />
</video>
### 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)
web/docs/guides/integrations/appsmith.mdx
+5 -1
View File
@@ -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.
web/sidebars.js
+3 -2
View File
@@ -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',
],
},
{
web/spec/supabase.yml
+2 -2
View File
@@ -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'
})
```
web/src/data/authProviders.js
+9
View File
@@ -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',
web/static/humans.txt
+1 -5
View File
@@ -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
web/static/img/guides/auth-notion/notion-developer.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 653 KiB

web/static/img/guides/auth-notion/notion.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 965 KiB

www/components/AuthWidget/AuthComponentExample.tsx
+127 -11
View File
@@ -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() {
<SwiperSlide key={1}>
<div className="pt-8" style={{ maxWidth: '420px', margin: '0 auto' }}>
<Card>
<Space size={8} direction="vertical">
<Space size={4} direction="vertical">
<div>
<Space size={3} direction="vertical">
<img src="https://app.supabase.io/img/supabase-dark.svg" width="96" />
<img
src={
darkMode
? `${basePath}/brand-assets/supabase-logo-wordmark--light.svg`
: `${basePath}/brand-assets/supabase-logo-wordmark--dark.svg`
}
width="96"
alt="Logo"
/>
<Typography.Title level={3}>{'Acme Company'}</Typography.Title>
</Space>
<Badge dot>Demo</Badge>
</div>
<Typography.Text>Sign in with</Typography.Text>
<div className="flex justify-evenly">
<Link href="https://supabase.com/docs/guides/auth/auth-facebook">
<Button type="default" size="large">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
width="24"
height="24"
>
<path
fill="currentColor"
d="M400 32H48A48 48 0 0 0 0 80v352a48 48 0 0 0 48 48h137.25V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.27c-30.81 0-40.42 19.12-40.42 38.73V256h68.78l-11 71.69h-57.78V480H400a48 48 0 0 0 48-48V80a48 48 0 0 0-48-48z"
></path>
</svg>
</Button>
</Link>
<Link href="https://supabase.com/docs/guides/auth/auth-google">
<Button type="default" size="large">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 488 512"
width="22"
height="22"
>
<path
fill="currentColor"
d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"
></path>
</svg>
</Button>
</Link>
<Link href="https://supabase.com/docs/guides/auth/auth-github">
<Button type="default" size="large">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 249"
width="22"
height="22"
>
<g fill="currentColor">
<path d="M127.505 0C57.095 0 0 57.085 0 127.505c0 56.336 36.534 104.13 87.196 120.99 6.372 1.18 8.712-2.766 8.712-6.134 0-3.04-.119-13.085-.173-23.739-35.473 7.713-42.958-15.044-42.958-15.044-5.8-14.738-14.157-18.656-14.157-18.656-11.568-7.914.872-7.752.872-7.752 12.804.9 19.546 13.14 19.546 13.14 11.372 19.493 29.828 13.857 37.104 10.6 1.144-8.242 4.449-13.866 8.095-17.05-28.32-3.225-58.092-14.158-58.092-63.014 0-13.92 4.981-25.295 13.138-34.224-1.324-3.212-5.688-16.18 1.235-33.743 0 0 10.707-3.427 35.073 13.07 10.17-2.826 21.078-4.242 31.914-4.29 10.836.048 21.752 1.464 31.942 4.29 24.337-16.497 35.029-13.07 35.029-13.07 6.94 17.563 2.574 30.531 1.25 33.743 8.175 8.929 13.122 20.303 13.122 34.224 0 48.972-29.828 59.756-58.22 62.912 4.573 3.957 8.648 11.717 8.648 23.612 0 17.06-.148 30.791-.148 34.991 0 3.393 2.295 7.369 8.759 6.117 50.634-16.879 87.122-64.656 87.122-120.973C255.009 57.085 197.922 0 127.505 0" />
<path d="M47.755 181.634c-.28.633-1.278.823-2.185.389-.925-.416-1.445-1.28-1.145-1.916.275-.652 1.273-.834 2.196-.396.927.415 1.455 1.287 1.134 1.923M54.027 187.23c-.608.564-1.797.302-2.604-.589-.834-.889-.99-2.077-.373-2.65.627-.563 1.78-.3 2.616.59.834.899.996 2.08.36 2.65M58.33 194.39c-.782.543-2.06.034-2.849-1.1-.781-1.133-.781-2.493.017-3.038.792-.545 2.05-.055 2.85 1.07.78 1.153.78 2.513-.019 3.069M65.606 202.683c-.699.77-2.187.564-3.277-.488-1.114-1.028-1.425-2.487-.724-3.258.707-.772 2.204-.555 3.302.488 1.107 1.026 1.445 2.496.7 3.258M75.01 205.483c-.307.998-1.741 1.452-3.185 1.028-1.442-.437-2.386-1.607-2.095-2.616.3-1.005 1.74-1.478 3.195-1.024 1.44.435 2.386 1.596 2.086 2.612M85.714 206.67c.036 1.052-1.189 1.924-2.705 1.943-1.525.033-2.758-.818-2.774-1.852 0-1.062 1.197-1.926 2.721-1.951 1.516-.03 2.758.815 2.758 1.86M96.228 206.267c.182 1.026-.872 2.08-2.377 2.36-1.48.27-2.85-.363-3.039-1.38-.184-1.052.89-2.105 2.367-2.378 1.508-.262 2.857.355 3.049 1.398" />
</g>
</svg>
</Button>
</Link>
<Link href="https://supabase.com/docs/guides/auth/auth-bitbucket">
<Button type="default" size="large">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
width="22"
height="22"
>
<path
fill="currentColor"
d="M22.2 32A16 16 0 0 0 6 47.8a26.35 26.35 0 0 0 .2 2.8l67.9 412.1a21.77 21.77 0 0 0 21.3 18.2h325.7a16 16 0 0 0 16-13.4L505 50.7a16 16 0 0 0-13.2-18.3 24.58 24.58 0 0 0-2.8-.2L22.2 32zm285.9 297.8h-104l-28.1-147h157.3l-25.2 147z"
></path>
</svg>
</Button>
</Link>
<Link href="https://supabase.com/docs/guides/auth/auth-gitlab">
<Button type="default" size="large">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
width="22"
height="22"
>
<path
fill="currentColor"
d="M105.2 24.9c-3.1-8.9-15.7-8.9-18.9 0L29.8 199.7h132c-.1 0-56.6-174.8-56.6-174.8zM.9 287.7c-2.6 8 .3 16.9 7.1 22l247.9 184-226.2-294zm160.8-88l94.3 294 94.3-294zm349.4 88l-28.8-88-226.3 294 247.9-184c6.9-5.1 9.7-14 7.2-22zM425.7 24.9c-3.1-8.9-15.7-8.9-18.9 0l-56.6 174.8h132z"
></path>
</svg>
</Button>
</Link>
</div>
<div className="flex flex-row w-full items-center justify-center">
<div className="w-full h-[1px] bg-gray-500" />
<Typography.Text type="secondary" className="w-full text-center text-gray-500">
or continue with
</Typography.Text>
<div className="w-full h-[1px] bg-gray-500" />
</div>
<Auth.UserContextProvider supabaseClient={supabase}>
<AuthContainer supabaseClient={supabase}>
<Auth
providers={['facebook', 'google', 'github', 'bitbucket', 'gitlab']}
socialButtonSize={'medium'}
socialLayout={'horizontal'}
supabaseClient={supabase}
socialColors={false}
/>
<Auth supabaseClient={supabase} />
</AuthContainer>
</Auth.UserContextProvider>
</Space>
www/pages/auth/Auth.tsx
+8 -2
View File
@@ -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() {
<SectionContainer>
<div className="grid grid-cols-12 lg:gap-16">
<div className="order-last col-span-12 lg:order-first lg:col-span-6 mt-8 lg:mt-0">
<AuthComponentExample />
<AuthComponentExample darkMode={darkMode} />
</div>
<div className="col-span-12 lg:col-span-6 lg:col-start-7 xl:col-span-4 xl:col-start-8">
<Space className="mb-4">