diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 57849f5e09a..7e2b99fa05d 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -2,3 +2,4 @@ /apps/www/ @supabase/frontend /apps/docs/ @supabase/docs /spec/ @supabase/docs +/docker/ @supabase/cli diff --git a/.github/workflows/prettier.yml b/.github/workflows/prettier.yml index c71fb46be16..43305fc1aed 100644 --- a/.github/workflows/prettier.yml +++ b/.github/workflows/prettier.yml @@ -13,8 +13,13 @@ jobs: uses: actions/checkout@v2 # disable this check while we migrate to monorepo - name: Run prettier - run: |- - npx prettier -c 'apps/**/*.{js,jsx,ts,tsx,css,md,json}' + uses: EPMatt/reviewdog-action-prettier@v1 + with: + github_token: ${{ secrets.github_token }} + reporter: github-pr-review + level: warning + command: npx prettier -c 'apps/**/*.{js,jsx,ts,tsx,css,md,json}' + # run: |- # function run_check() { # if $(grep -q '"prettier"' "$1") ; then @@ -35,5 +40,9 @@ jobs: - name: Check out repo uses: actions/checkout@v2 - name: Run prettier - run: |- - npx prettier -c 'i18n/**/*.{js,jsx,ts,tsx,css,md,json}' + uses: EPMatt/reviewdog-action-prettier@v1 + with: + github_token: ${{ secrets.github_token }} + reporter: github-pr-review + level: warning + command: npx prettier -c 'i18n/**/*.{js,jsx,ts,tsx,css,md,json}' diff --git a/apps/docs/components/MDX/social_provider_settings_supabase.mdx b/apps/docs/components/MDX/social_provider_settings_supabase.mdx new file mode 100644 index 00000000000..1cc3771e6f3 --- /dev/null +++ b/apps/docs/components/MDX/social_provider_settings_supabase.mdx @@ -0,0 +1,6 @@ +- Go to your [Supabase Project Dashboard](https://app.supabase.com) +- In the left sidebar, click the `Authentication` icon (near the top) +- Click on [`Providers`](https://app.supabase.com/project/_/auth/providers) under the Configuration section +- Click on **{props.provider}** from the accordion list to expand and turn **{props.provider} Enabled** to ON +- Enter your **{props.provider} Client ID** and **{props.provider} Client Secret** saved in the previous step +- Click `Save` \ No newline at end of file diff --git a/apps/docs/components/MDX/social_provider_setup.mdx b/apps/docs/components/MDX/social_provider_setup.mdx new file mode 100644 index 00000000000..4e32c3bf401 --- /dev/null +++ b/apps/docs/components/MDX/social_provider_setup.mdx @@ -0,0 +1,8 @@ +The next step requires a callback URL, which looks like this: + +`https://.supabase.co/auth/v1/callback` + +- Go to your [Supabase Project Dashboard](https://app.supabase.com) +- Click on the `Authentication` icon in the left sidebar +- Click on [`Providers`](https://app.supabase.com/project/_/auth/providers) under the Configuration section +- Click on **{props.provider}** from the accordion list to expand and you'll find your **Redirect URL**, you can click `Copy` to copy it to the clipboard diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts index b5b21af6420..d9837f2ea65 100644 --- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts +++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts @@ -14,7 +14,7 @@ export const REFERENCES: References = { name: 'supabase-js', library: 'supabase-js', versions: ['v2', 'v1'], - icon: '/docs/img/libraries/javascript-icon.svg', + icon: '/img/libraries/javascript-icon', }, dart: { name: 'Flutter', @@ -688,22 +688,22 @@ export const reference = { url: '/reference/javascript/start', level: 'reference_javascript', items: [], - icon: 'docs/img/icons/javascript.svg', + icon: '/img/icons/menu/reference-javascript', }, { name: 'supabase-dart', url: '/reference/dart/start', level: 'reference_dart', items: [], - icon: 'docs/img/icons/javascript.svg', - }, - { - name: 'supbase-python', - url: '/reference/python/start', - level: 'reference_python', - items: [], - icon: 'docs/img/icons/javascript.svg', + icon: '/img/icons/menu/reference-dart', }, + // { + // name: 'supabase-python', + // url: '/reference/python/start', + // level: 'reference_python', + // items: [], + // icon: '/img/icons/menu/reference-javascript', + // }, ], }, { @@ -713,13 +713,13 @@ export const reference = { name: 'Supabase CLI', url: '/reference/cli/start', items: [], - icon: 'docs/img/icons/cli-icon.svg', + icon: '/img/icons/menu/reference-cli', }, { name: 'Management API', url: '/reference/javascript', items: [], - icon: 'docs/img/icons/javascript-icon.svg', + icon: '/img/icons/menu/reference-api', }, ], }, diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx index ad9a190f55b..cfb4d87b143 100644 --- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx +++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx @@ -62,7 +62,7 @@ export type RefKeyOptions = | 'self-hosting-storage' | 'self-hosting-realtime' -const SideNav = () => { +const NavigationMenu = () => { const router = useRouter() let version = '' @@ -270,4 +270,4 @@ const SideNav = () => { ) } -export default memo(SideNav) +export default memo(NavigationMenu) diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.utils.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.utils.ts new file mode 100644 index 00000000000..ad3d100450f --- /dev/null +++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.utils.ts @@ -0,0 +1,6 @@ +// check if the link is allowed to be displayed +export function isFuncNotInLibraryOrVersion(id, type, allowedKeys) { + if (id && allowedKeys && !allowedKeys.includes(id) && type !== 'markdown') { + return true + } +} diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx index f298683984d..e4e73a8e132 100644 --- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx +++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx @@ -137,7 +137,14 @@ const ContentLink = React.memo(function ContentLink(props: any) { : 'hover:text-brand-900 text-scale-1000', ].join(' ')} > - {props.icon && } + {props.icon && ( + {props.icon} + )} {props.name} @@ -177,14 +184,15 @@ const Content = (props) => { - {menu.items.map((x, index) => { + {menu.items.map((x) => { return ( -
+
{x.items && x.items.length > 0 ? (
{x.items.map((subItem, subItemIndex) => { return ( { })}
) : ( - + )}
) diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx index fd87508d468..87a90b82baa 100644 --- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx +++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx @@ -12,8 +12,9 @@ import RevVersionDropdown from '~/components/RefVersionDropdown' import { useMenuActiveRefId } from '~/hooks/useMenuState' import { RefIdOptions, RefKeyOptions } from './NavigationMenu' -import React from 'react' +import React, { Fragment } from 'react' import { generateAllowedClientLibKeys } from '~/lib/refGenerator/helpers' +import { isFuncNotInLibraryOrVersion } from './NavigationMenu.utils' const HeaderImage = React.memo(function HeaderImage(props: any) { const router = useRouter() @@ -131,6 +132,7 @@ const RenderLink = React.memo(function RenderLink(props: any) { .map((item) => { return ( = ({ id, lib, commonSections, sp
    {sections.map((fn: any, fnIndex) => { - // - // check if the link is allowed to be displayed - function isFuncNotInLibraryOrVersion(id, type) { - if (id && allowedKeys && !allowedKeys.includes(id) && type !== 'markdown') { - /* - * Remove this menu link from side bar, as it does not exist for either - * this language, or for this lib version - * - * */ - return true - } else { - return false - } - } - // run allow check - if (isFuncNotInLibraryOrVersion(fn.id, fn.type)) { - return <> + if (isFuncNotInLibraryOrVersion(fn.id, fn.type, allowedKeys)) { + return } // handle subtitles with subitems - if (!fn.id) { - return ( - <> - - - {fn.items && - fn.items - //.filter((item) => item.libs && item.libs.includes(lib)) - .map((item) => { - // run allow check - if (isFuncNotInLibraryOrVersion(item.id, item.type)) return <> - return ( - - ) - })} - - ) - } else { - // handle normal links - return ( - <> - - {fn.items && - fn.items - //.filter((item) => item.libs.includes(lib)) - .map((item) => ( - - ))} - - ) - } + return fn.id ? ( + + + {fn.items && + fn.items + //.filter((item) => item.libs.includes(lib)) + .map((item) => ( + + ))} + + ) : ( + + + + {fn.items && + fn.items.map((item, i) => { + // run allow check + if (isFuncNotInLibraryOrVersion(item.id, item.type, allowedKeys)) + return + return ( + + ) + })} + + ) })}
diff --git a/apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx b/apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx index d5a706d6cb2..b1d344b081d 100644 --- a/apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx +++ b/apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx @@ -42,6 +42,7 @@ const TopNavBarRef: FC = () => { const key = localStorage.getItem('supabaseDarkMode') document.documentElement.className = key === 'true' ? 'dark' : '' + document.documentElement.style.colorScheme = key === 'true' ? 'dark' : '' } const onSelectVersion = (version: string) => { diff --git a/apps/docs/components/index.tsx b/apps/docs/components/index.tsx index cdfa36060b5..9ee8c4060d5 100644 --- a/apps/docs/components/index.tsx +++ b/apps/docs/components/index.tsx @@ -17,6 +17,8 @@ import Extensions from './Extensions' import { Heading } from './CustomHTMLElements' import QuickstartIntro from './MDX/quickstart_intro.mdx' import ProjectSetup from './MDX/project_setup.mdx' +import SocialProviderSetup from './MDX/social_provider_setup.mdx' +import SocialProviderSettingsSupabase from './MDX/social_provider_settings_supabase.mdx' import { Mermaid } from 'mdx-mermaid/lib/Mermaid' import InlineCodeTag from './CustomHTMLElements/InlineCode' import React from 'react' @@ -42,6 +44,8 @@ const components = { JwtGenerator, QuickstartIntro, ProjectSetup, + SocialProviderSetup, + SocialProviderSettingsSupabase, Mermaid, Extensions, Alert: (props: any) => ( diff --git a/apps/docs/components/reference/ApiOperationSection.tsx b/apps/docs/components/reference/ApiOperationSection.tsx index 6272e2c3e40..f97549b4775 100644 --- a/apps/docs/components/reference/ApiOperationSection.tsx +++ b/apps/docs/components/reference/ApiOperationSection.tsx @@ -31,7 +31,7 @@ const ApiOperationSection = (props) => { > {operation.operation} - {operation.fullPath} + {operation.path}
diff --git a/apps/docs/components/reference/RefFunctionSection.tsx b/apps/docs/components/reference/RefFunctionSection.tsx index a31c52af992..5cdacd0d458 100644 --- a/apps/docs/components/reference/RefFunctionSection.tsx +++ b/apps/docs/components/reference/RefFunctionSection.tsx @@ -9,6 +9,7 @@ import RefSubLayout from '~/layouts/ref/RefSubLayout' import { extractTsDocNode, generateParameters } from '~/lib/refGenerator/helpers' import RefDetailCollapse from '~/components/reference/RefDetailCollapse' +import { Fragment } from 'react' interface ICommonFunc { id: string @@ -32,11 +33,6 @@ const RefFunctionSection: React.FC = (props) => { // gracefully return nothing if function does not exist if (!item) return <> - if (item && !item['$ref']) { - //console.warn('🚩 issue with $ref in:', item.id) - } - - // console.log(item) const hasTsRef = item['$ref'] || null const tsDefinition = @@ -64,11 +60,7 @@ const RefFunctionSection: React.FC = (props) => { {item.description}
)} - {/* {functionMarkdownContent && ( -
- -
- )} */} + {item.notes && (
{item.notes} @@ -89,25 +81,29 @@ const RefFunctionSection: React.FC = (props) => { }) const paramItem = overide?.length > 0 ? overide[0] : param - return ( - + {paramItem.subContent && (
{param.subContent.map((param) => { return ( - <> + {param.subContent && ( {param.subContent.map((param) => { - return + return ( + + ) })} )} - + ) })} @@ -134,6 +130,14 @@ const RefFunctionSection: React.FC = (props) => { {item.examples && item.examples.map((example, exampleIndex) => { const exampleString = '' + + const codeBlockLang = example?.code?.startsWith('```js') + ? 'js' + : example?.code?.startsWith('```ts') + ? 'ts' + : example?.code?.startsWith('```dart') + ? 'dart' + : 'js' // ` // import { createClient } from '@supabase/supabase-js' @@ -150,9 +154,18 @@ const RefFunctionSection: React.FC = (props) => { return ( + {example.description && ( +
+ + {example.description} + +
+ )} + {((tables && tables.length > 0) || sql) && ( = (props) => { )} + {exampleString + @@ -201,8 +215,10 @@ const RefFunctionSection: React.FC = (props) => { example.code .replace(/```/g, '') .replace('js', '') - .replace('ts', ''))} + .replace('ts', '') + .replace('dart', ''))} + {response && ( = (props) => { > {response.replace(/```/g, '').replace('json', '')} diff --git a/apps/docs/components/reference/RefSectionHandler.tsx b/apps/docs/components/reference/RefSectionHandler.tsx index 75476287461..d54e5d616bb 100644 --- a/apps/docs/components/reference/RefSectionHandler.tsx +++ b/apps/docs/components/reference/RefSectionHandler.tsx @@ -36,16 +36,17 @@ const RefSectionHandler = (props) => { return ( - {props.sections.map((x) => { + {props.sections.map((x, i) => { switch (x.type) { case 'markdown': const markdownData = props.pageProps.docs.find((doc) => doc.id === x.id) - return + return break case 'function': return ( { /> ) case 'cli-command': - return + return break case 'operation': - return + return ( + + ) default: return ( + + + Install the latest version + + + + +```sh +npm install @supabase/supabase-js@2 +``` + + + + + + + +_Optionally_ if you are using custom configuration with `createClient` then follow below: + + + + + + + +```ts title=src/supabaseClient.ts +const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY, { + schema: 'custom', + persistSession: false, +}) +``` + + + + +```ts title=src/supabaseClient.ts +const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY, { + db: { + schema: 'custom', + }, + auth: { + persistSession: true, + }, +}) +``` + + + + + + + +Read more about the [constructor options](/docs/reference/javascript/release-notes#explicit-constructor-options). + +### Auth methods + +The signIn() method has been deprecated in favor of more explicit method signatures to help with type hinting. Previously it was difficult for developers to know what they were missing (e.g., a lot of developers didn't realize they could use passwordless magic links). + + + + +#### Sign in with email and password + + + + + + +{/* prettier-ignore */} +```ts +const { user, error } = await supabase + .auth + .signIn({ email, password }) +``` + + + +{/* prettier-ignore */} +```ts +const { + data: { user }, + error, +} = await supabase + .auth + .signInWithPassword({ email, password }) +``` + + + + + + + + + + +#### Sign in with magic link + + + + + +{/* prettier-ignore */} +```ts +const { error } = await supabase + .auth + .signIn({ email }) +``` + + + +{/* prettier-ignore */} +```ts +const { error } = await supabase + .auth + .signInWithOtp({ email }) +``` + + + + + + + + + + +#### Sign in with a third-party provider + + + + + + +{/* prettier-ignore */} +```ts +const { error } = await supabase + .auth + .signIn({ provider }) +``` + + + +{/* prettier-ignore */} +```ts +const { error } = await supabase + .auth + .signInWithOAuth({ provider }) +``` + + + + + + + + + + +#### Sign in with phone + + + + + +{/* prettier-ignore */} +```ts +const { error } = await supabase + .auth + .signIn({ phone, password }) +``` + + + +{/* prettier-ignore */} +```ts +const { error } = await supabase + .auth + .signInWithPassword({ phone, password }) +``` + + + + + + + + + + +#### Sign in with phone using OTP + + + + + + +{/* prettier-ignore */} +```ts +const { error } = await supabase + .auth + .api + .sendMobileOTP(phone) +``` + + + +{/* prettier-ignore */} +```ts +const { data, error } = await supabase + .auth + .signInWithOtp({ phone }) + +// After receiving a SMS with a OTP. +const { data, error } = await supabase +.auth +.verifyOtp({ phone, token }) +``` + + + + + + + + + + +#### Reset password for email + + + + + + +{/* prettier-ignore */} +```ts +const { data, error } = await supabase + .auth + .api + .resetPasswordForEmail(email) +``` + + + +{/* prettier-ignore */} +```ts +const { data, error } = await supabase + .auth + .resetPasswordForEmail(email) +``` + + + + + + + + + + +#### Get the user's current session + + + + + + + +```ts +const session = supabase.auth.session() +``` + + + + +```ts +const { + data: { session }, +} = await supabase.auth.getSession() +``` + + + + + + + + + + +#### Get the logged-in user + + + + + + + +```ts +const user = supabase.auth.user() +``` + + + + +```ts +const { + data: { session }, +} = await supabase.auth.getSession() +const { user } = session +``` + + + + + + + + + + +#### Update user data for a logged-in user + + + + + + +{/* prettier-ignore */} +```ts +const { user, error } = await supabase + .auth + .update({ attributes }) +``` + + + + +```ts +const { + data: { user }, + error, +} = await supabase.auth.updateUser({ attributes }) +``` + + + + + + + + + + +#### Use a custom `access_token` JWT with Supabase + + + + + + + +```ts +const { user, error } = supabase.auth.setAuth(access_token) +``` + + + +{/* prettier-ignore */} +```ts +const supabase = createClient( + SUPABASE_URL, + SUPABASE_ANON_KEY, + { + global: { + headers: { + Authorization: `Bearer ${access_token}`, + }, + }, + } +) +``` + + + + + + + +### Cookie methods + +The cookie-related methods like `setAuthCookie` and `getUserByCookie` have been removed. + +For Next.js you can use the [Auth Helpers](https://supabase.com/docs/guides/auth/auth-helpers/nextjs) to help you manage cookies. +If you can't use the Auth Helpers, you can use [server-side rendering](https://supabase.com/docs/guides/auth/server-side-rendering). + +Some the [PR](https://github.com/supabase/gotrue-js/pull/340) for additional background information. + +### Data methods + +`.insert()` / `.upsert()` / `.update()` / `.delete()` don't return rows by default: [PR](https://github.com/supabase/postgrest-js/pull/276). + +Previously, these methods return inserted/updated/deleted rows by default (which caused [some confusion](https://github.com/supabase/supabase/discussions/1548)), and you can opt to not return it by specifying `returning: 'minimal'`. Now the default behavior is to not return rows. To return inserted/updated/deleted rows, add a `.select()` call at the end. + + + + +#### Insert and return data + + + + + + +{/* prettier-ignore */} +```ts +const { data, error } = await supabase + .from('my_table') + .insert({ new_data }) +``` + + + +{/* prettier-ignore */} +```ts +const { data, error } = await supabase + .from('my_table') + .insert({ new_data }) + .select() +``` + + + + + + + + + + +#### Update and return data + + + + + + +{/* prettier-ignore */} +```ts +const { data, error } = await supabase + .from('my_table') + .update({ new_data }) + .eq('id', id) +``` + + + +{/* prettier-ignore */} +```ts +const { data, error } = await supabase + .from('my_table') + .update({ new_data }) + .eq('id', id) + .select() +``` + + + + + + + + + + +#### Upsert and return data + + + + + + +{/* prettier-ignore */} +```ts +const { data, error } = await supabase + .from('my_table') + .upsert({ new_data }) +``` + + + +{/* prettier-ignore */} +```ts +const { data, error } = await supabase + .from('my_table') + .upsert({ new_data }) + .select() +``` + + + + + + + + + + +#### Delete and return data + + + + + + +{/* prettier-ignore */} +```ts +const { data, error } = await supabase + .from('my_table') + .delete() + .eq('id', id) +``` + + + +{/* prettier-ignore */} +```ts +const { data, error } = await supabase + .from('my_table') + .delete() + .eq('id', id) + .select() +``` + + + + + + + +### Realtime methods + + + + +#### Subscribe + + + + + + + +```ts +const userListener = supabase + .from('users') + .on('*', (payload) => handleAllEventsPayload(payload.new)) + .subscribe() +``` + + + + +```ts +const userListener = supabase + .channel('public:user') + .on('postgres_changes', { event: '*', schema: 'public', table: 'user' }, (payload) => + handleAllEventsPayload() + ) + .subscribe() +``` + + + + + + + + + + +#### Unsubscribe + + + + + + + +```ts +userListener.unsubscribe() +``` + + + + +```ts +supabase.removeChannel(userListener) +``` + + + + + + diff --git a/apps/docs/layouts/SiteLayout.tsx b/apps/docs/layouts/SiteLayout.tsx index 9aa8c37d9c0..eb017378efd 100644 --- a/apps/docs/layouts/SiteLayout.tsx +++ b/apps/docs/layouts/SiteLayout.tsx @@ -294,8 +294,10 @@ const SiteLayout = ({ children }) => { if (!key) { // Default to dark mode if no preference config document.documentElement.className = 'dark' + document.documentElement.style.colorScheme = 'dark' } else { document.documentElement.className = key === 'true' ? 'dark' : '' + document.documentElement.style.colorScheme = key === 'true' ? 'dark' : '' } }, []) diff --git a/apps/docs/layouts/guides/index.tsx b/apps/docs/layouts/guides/index.tsx index e3b64828a60..07ec7929195 100644 --- a/apps/docs/layouts/guides/index.tsx +++ b/apps/docs/layouts/guides/index.tsx @@ -60,6 +60,8 @@ const Layout: FC = (props) => { const hasTableOfContents = tocList.length > 0 + const ogPageType = asPath.split('/')[2] + return ( <> = (props) => { url: `https://supabase.com/docs${asPath}`, images: [ { - url: `https://supabase.com/docs/img/supabase-og-image.png`, + url: `https://obuldanrptloktxcffvn.functions.supabase.co/og-images?site=docs${ + ogPageType ? `&type=${ogPageType}` : '' + }&title=${encodeURIComponent(props.meta?.title)}&description=${encodeURIComponent( + props.meta?.description + )}`, }, ], }} diff --git a/apps/docs/layouts/ref/RefSubLayout.tsx b/apps/docs/layouts/ref/RefSubLayout.tsx index 84305bb4c00..fb3668fc594 100644 --- a/apps/docs/layouts/ref/RefSubLayout.tsx +++ b/apps/docs/layouts/ref/RefSubLayout.tsx @@ -57,7 +57,7 @@ const RefSubLayout: FC & RefSubLayoutSubComponents = (props) = const Section: FC = (props) => { return (
= (props) => { const EducationSection: FC = ({ icon, hideTitle = false, ...props }) => { return (
{!hideTitle && } diff --git a/apps/docs/pages/getting-started.mdx b/apps/docs/pages/getting-started.mdx index 6313b6cb018..ccb7790f15e 100644 --- a/apps/docs/pages/getting-started.mdx +++ b/apps/docs/pages/getting-started.mdx @@ -62,7 +62,7 @@ A scalable websocket engine for managing user Presence, broadcasting messages, a - Official Docs: [Supabase Realtime docs](/docs/guides/realtime) - Source code: [github.com/supabase/realtime](https://github.com/supabase/realtime) -- License: [Apache 2](https://github.com/supabase/realtime/blob/master/LICENSE) +- License: [Apache 2](https://github.com/supabase/realtime/blob/main/LICENSE) - Language: Elixir ### Storage API (large file storage) diff --git a/apps/docs/pages/guides/api.mdx b/apps/docs/pages/guides/api.mdx index ac135dbc7b4..a6b8a018fd6 100644 --- a/apps/docs/pages/guides/api.mdx +++ b/apps/docs/pages/guides/api.mdx @@ -260,6 +260,7 @@ const { data, fetching, error } = result curl --request POST '/graphql/v1' \ -H 'apikey: ' \ -H 'Authorization: Bearer ' \ +-H 'Content-Type: application/json' \ -d '{ "query":"{ todos(first: 3) { edges { node { id } } } }" }' ``` diff --git a/apps/docs/pages/guides/auth/auth-helpers/nextjs-server-components.mdx b/apps/docs/pages/guides/auth/auth-helpers/nextjs-server-components.mdx index 10fa7f73f31..4b31c0a1011 100644 --- a/apps/docs/pages/guides/auth/auth-helpers/nextjs-server-components.mdx +++ b/apps/docs/pages/guides/auth/auth-helpers/nextjs-server-components.mdx @@ -222,7 +222,7 @@ export default function SupabaseListener({ accessToken }) { useEffect(() => { supabase.auth.onAuthStateChange((event, session) => { if (session?.access_token !== accessToken) { - router.refresh() + router.reload() } }) }, [accessToken]) @@ -322,7 +322,7 @@ Create a `/components/supabase-listener.tsx` file and add the following: import { useRouter } from 'next/navigation' import { useEffect } from 'react' -import supabase from '../utils/supabase' +import supabase from '../utils/supabase-browser' export default function SupabaseListener({ accessToken }: { accessToken?: string }) { const router = useRouter() diff --git a/apps/docs/pages/guides/auth/auth-helpers/remix.mdx b/apps/docs/pages/guides/auth/auth-helpers/remix.mdx index 0aa105dd66a..f15596e84a1 100644 --- a/apps/docs/pages/guides/auth/auth-helpers/remix.mdx +++ b/apps/docs/pages/guides/auth/auth-helpers/remix.mdx @@ -440,8 +440,8 @@ And then use a `fetcher` to simulate submitting a form to our action, inside the const { env, session } = useLoaderData() const fetcher = useFetcher() -const [supabase] = useState( - () => createBrowserClient < Database > (env.SUPABASE_URL, env.SUPABASE_ANON_KEY) +const [supabase] = useState(() => + createBrowserClient(env.SUPABASE_URL, env.SUPABASE_ANON_KEY) ) const serverAccessToken = session?.access_token @@ -451,6 +451,8 @@ useEffect(() => { data: { subscription }, } = supabase.auth.onAuthStateChange((event, session) => { if (session?.access_token !== serverAccessToken) { + // server and client are out of sync. + // Remix recalls active loaders after actions complete fetcher.submit(null, { method: 'post', action: '/handle-supabase-auth', diff --git a/apps/docs/pages/guides/auth/managing-user-data.mdx b/apps/docs/pages/guides/auth/managing-user-data.mdx index 5ec883528ff..3e49846fc5d 100644 --- a/apps/docs/pages/guides/auth/managing-user-data.mdx +++ b/apps/docs/pages/guides/auth/managing-user-data.mdx @@ -18,7 +18,7 @@ For example, a `public.profiles` table might look like this: ```sql create table public.profiles ( - id uuid references auth.users not null on delete cascade, + id uuid not null references auth.users on delete cascade, first_name text, last_name text, diff --git a/apps/docs/pages/guides/auth/phone-login/twilio.mdx b/apps/docs/pages/guides/auth/phone-login/twilio.mdx index fa45a547970..4bdc9ac11e4 100644 --- a/apps/docs/pages/guides/auth/phone-login/twilio.mdx +++ b/apps/docs/pages/guides/auth/phone-login/twilio.mdx @@ -141,7 +141,7 @@ You should present a form to the user so they can input the 6 digit pin, then se ```js -let { session, error } = await supabase.auth.verifyOTP({ +let { session, error } = await supabase.auth.verifyOtp({ phone: '+13334445555', token: '123456', type: 'sms', @@ -257,7 +257,7 @@ The second step is the same as the previous section, you need to collect the 6-d ```js -let { session, error } = await supabase.auth.verifyOTP({ +let { session, error } = await supabase.auth.verifyOtp({ phone: '+13334445555', token: '123456', type: 'sms', diff --git a/apps/docs/pages/guides/auth/social-login/auth-apple.mdx b/apps/docs/pages/guides/auth/social-login/auth-apple.mdx index d5bf22f9205..7442a7a28ec 100644 --- a/apps/docs/pages/guides/auth/social-login/auth-apple.mdx +++ b/apps/docs/pages/guides/auth/social-login/auth-apple.mdx @@ -57,19 +57,7 @@ This will serve as the `client_id` when you make API calls to authenticate the u ## Find your callback URL -The next step requires a callback URL, which looks like this: - -`https://.supabase.co/auth/v1/callback` - -- Go to your [Supabase Project Dashboard](https://app.supabase.com). -- 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`. - - + ## Configure your Services ID @@ -167,13 +155,7 @@ puts token ## Add your OAuth credentials to Supabase -- Go to your [Supabase Dashboard](https://app.supabase.com). -- 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 `Apple Enabled` to ON. -- Enter your `client_id` and `client_secret` saved in the previous steps. -- Click `Save`. + ## Add login code to your client app diff --git a/apps/docs/pages/guides/auth/social-login/auth-bitbucket.mdx b/apps/docs/pages/guides/auth/social-login/auth-bitbucket.mdx index 626b1ef3cf7..2347e4e0985 100644 --- a/apps/docs/pages/guides/auth/social-login/auth-bitbucket.mdx +++ b/apps/docs/pages/guides/auth/social-login/auth-bitbucket.mdx @@ -25,19 +25,7 @@ Setting up Bitbucket logins for your application consists of 3 parts: ## Find your callback URL -The next step requires a callback URL, which looks like this: - -`https://.supabase.co/auth/v1/callback` - -- Go to your [Supabase Project Dashboard](https://app.supabase.com). -- 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 Bitbucket OAuth app @@ -56,13 +44,7 @@ The next step requires a callback URL, which looks like this: ## Add your Bitbucket credentials into your Supabase Project -- Go to your [Supabase Project Dashboard](https://app.supabase.com) -- 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 `Bitbucket Enabled` to ON -- Enter your `client_id` and `client_secret` saved in the previous step -- Click `Save` + ## Add login code to your client app diff --git a/apps/docs/pages/guides/auth/social-login/auth-discord.mdx b/apps/docs/pages/guides/auth/social-login/auth-discord.mdx index dc599979d0e..4d8185d74e3 100644 --- a/apps/docs/pages/guides/auth/social-login/auth-discord.mdx +++ b/apps/docs/pages/guides/auth/social-login/auth-discord.mdx @@ -29,19 +29,7 @@ Setting up Discord logins for your application consists of 3 parts: ## 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.com). -- 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 Discord Application @@ -55,13 +43,7 @@ In the next step you require a callback URL, which looks like this: ## Add your Discord credentials into your Supabase Project -- Go to your [Supabase Project Dashboard](https://app.supabase.com) -- 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 `Discord Enabled` to ON -- Enter your `client_id` and `client_secret` saved in the previous step -- Click `Save` + ## Add login code to your client app diff --git a/apps/docs/pages/guides/auth/social-login/auth-facebook.mdx b/apps/docs/pages/guides/auth/social-login/auth-facebook.mdx index 43658f38b00..72f6c46df46 100644 --- a/apps/docs/pages/guides/auth/social-login/auth-facebook.mdx +++ b/apps/docs/pages/guides/auth/social-login/auth-facebook.mdx @@ -31,21 +31,7 @@ Setting up Facebook logins for your application consists of 3 parts: - Fill in your app information, then click `Create App`. - This should bring you to the screen: `Add Products to Your App`. (Alternatively you can click on `Add Product` in the left sidebar to get to this screen.) -## Find your callback URI - -The next step requires a callback URI, which looks like this: - -`https://.supabase.co/auth/v1/callback` - -- Go to your [Supabase Project Dashboard](https://app.supabase.com). -- 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`. - - + ## Set up FaceBook Login for your Facebook App @@ -73,13 +59,7 @@ You can read more about access levels [here](https://developers.facebook.com/doc ## Enter your Facebook App ID and Secret into your Supabase Project -- Go to your [Supabase Project Dashboard](https://app.supabase.com) -- 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 `Facebook Enabled` to ON -- Enter your `Facebook client ID` and `Facebook secret` saved in the previous step -- Click `Save` + ## Add login code to your client app diff --git a/apps/docs/pages/guides/auth/social-login/auth-github.mdx b/apps/docs/pages/guides/auth/social-login/auth-github.mdx index 6ddcdac1ede..e6f2dff566b 100644 --- a/apps/docs/pages/guides/auth/social-login/auth-github.mdx +++ b/apps/docs/pages/guides/auth/social-login/auth-github.mdx @@ -34,19 +34,7 @@ Go to the [GitHub Developer Settings](https://github.com/settings/developers) pa ## Find your callback URL -The next step requires a callback URL, which looks like this: - -`https://.supabase.co/auth/v1/callback` - -- Go to your [Supabase Project Dashboard](https://app.supabase.com). -- 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`. - - + ## Register a new OAuth application @@ -66,13 +54,7 @@ Copy your new OAuth credentials ## Enter your GitHub credentials into your Supabase Project -- Go to your [Supabase Project Dashboard](https://app.supabase.com) -- 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 `GitHub Enabled` to ON -- Enter your `GitHub Client ID` and `GitHub Client Secret` saved in the previous step -- Click `Save` + ## Add login code to your client app diff --git a/apps/docs/pages/guides/auth/social-login/auth-gitlab.mdx b/apps/docs/pages/guides/auth/social-login/auth-gitlab.mdx index 870c292a0b8..2e4e234c21c 100644 --- a/apps/docs/pages/guides/auth/social-login/auth-gitlab.mdx +++ b/apps/docs/pages/guides/auth/social-login/auth-gitlab.mdx @@ -25,19 +25,7 @@ Setting up GitLab logins for your application consists of 3 parts: ## Find your callback URL -The next step requires a callback URL, which looks like this: - -`https://.supabase.co/auth/v1/callback` - -- Go to your [Supabase Project Dashboard](https://app.supabase.com). -- 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 your GitLab Application @@ -53,13 +41,7 @@ The next step requires a callback URL, which looks like this: ## Add your GitLab credentials into your Supabase Project -- Go to your [Supabase Project Dashboard](https://app.supabase.com). -- 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 `GitLab Enabled` to ON. -- Enter your `client_id` and `client_secret` saved in the previous step. -- Click `Save`. + ## Add login code to your client app diff --git a/apps/docs/pages/guides/auth/social-login/auth-google.mdx b/apps/docs/pages/guides/auth/social-login/auth-google.mdx index 4a8a2c3b222..261887a8468 100644 --- a/apps/docs/pages/guides/auth/social-login/auth-google.mdx +++ b/apps/docs/pages/guides/auth/social-login/auth-google.mdx @@ -48,19 +48,7 @@ From your project's dashboard screen: ## Find your callback URL -The next step requires a callback URL, which looks like this: - -`https://.supabase.co/auth/v1/callback` - -- Go to your [Supabase Project Dashboard](https://app.supabase.com). -- 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 your Google credentials @@ -81,13 +69,7 @@ Copy your new OAuth credentials ## Enter your Google credentials into your Supabase Project -- Go to your [Supabase Project Dashboard](https://app.supabase.com) -- 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 `Google Enabled` to ON -- Enter your `Google Client ID` and `Google Client Secret` saved in the previous step -- Click `Save` + ## Add login code to your client app diff --git a/apps/docs/pages/guides/auth/social-login/auth-linkedin.mdx b/apps/docs/pages/guides/auth/social-login/auth-linkedin.mdx index 22fb6f1f05e..a8fe5099b96 100644 --- a/apps/docs/pages/guides/auth/social-login/auth-linkedin.mdx +++ b/apps/docs/pages/guides/auth/social-login/auth-linkedin.mdx @@ -25,19 +25,7 @@ Setting up LinkedIn logins for your application consists of 3 parts: ## Find your callback URL -The next step requires a callback URL, which looks like this: - -`https://.supabase.co/auth/v1/callback` - -- Go to your [Supabase Project Dashboard](https://app.supabase.com). -- 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 LinkedIn OAuth app @@ -52,13 +40,7 @@ The next step requires a callback URL, which looks like this: ## Enter your LinkedIn credentials into your Supabase Project -- Go to your [Supabase Project Dashboard](https://app.supabase.com). -- 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 `LinkedIn Enabled` to ON. -- Enter your `client_id` and `client_secret` saved in the previous step. -- Click `Save`. + ## Add login code to your client app diff --git a/apps/docs/pages/guides/auth/social-login/auth-notion.mdx b/apps/docs/pages/guides/auth/social-login/auth-notion.mdx index 1f1d74e465a..ec50ee2cbe7 100644 --- a/apps/docs/pages/guides/auth/social-login/auth-notion.mdx +++ b/apps/docs/pages/guides/auth/social-login/auth-notion.mdx @@ -36,19 +36,7 @@ Setting up Notion logins for your application consists of 3 parts: ![notion.so](/docs/img/guides/auth-notion/notion-redirect-uri.png) -You can retrieve the redirect uri with the following steps: - -- Go to your [Supabase Project Dashboard](https://app.supabase.com). -- 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. -- Add `/auth/v1/callback` to the end of that to get your full `OAuth Redirect URI`. - -Your redirect uri should look like the following: `https://.supabase.co/auth/v1/callback` - - + ## Add your Notion credentials into your Supabase Project @@ -56,12 +44,7 @@ Your redirect uri should look like the following: `https://.supabas ![notion.so](/docs/img/guides/auth-notion/notion-creds.png) -- Go to your [Supabase Project Dashboard](https://app.supabase.com) -- In the left sidebar, click the `Authentication` icon (near the top) -- Click `Settings` from the list to go to the `Authentication Settings` page -- Under `External OAuth Providers` turn `Notion Enabled` to ON -- Enter the "OAuth client ID" and "OAuth client secret" obtained in the `client id` and `client secret` fields. -- Click `Save` + ## Add login code to your client app diff --git a/apps/docs/pages/guides/auth/social-login/auth-slack.mdx b/apps/docs/pages/guides/auth/social-login/auth-slack.mdx index 6d700e6f961..accf020f84d 100644 --- a/apps/docs/pages/guides/auth/social-login/auth-slack.mdx +++ b/apps/docs/pages/guides/auth/social-login/auth-slack.mdx @@ -25,19 +25,7 @@ Setting up Slack logins for your application consists of 3 parts: ## Find your callback URL -The next step requires a callback URL, which looks like this: - -`https://.supabase.co/auth/v1/callback` - -- Go to your [Supabase Project Dashboard](https://app.supabase.com). -- 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 Slack OAuth app @@ -65,13 +53,7 @@ Under `Redirect URLs`: ## Enter your Slack credentials into your Supabase Project -- Go to your [Supabase Project Dashboard](https://app.supabase.com). -- 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 `Slack Enabled` to ON. -- Enter your `Client ID` (`client_id`) and `Client Secret` (`client_secret`) saved in the previous step. -- Click `Save`. + ## Add login code to your client app diff --git a/apps/docs/pages/guides/auth/social-login/auth-spotify.mdx b/apps/docs/pages/guides/auth/social-login/auth-spotify.mdx index c5f3a0872f2..8358ece55dc 100644 --- a/apps/docs/pages/guides/auth/social-login/auth-spotify.mdx +++ b/apps/docs/pages/guides/auth/social-login/auth-spotify.mdx @@ -25,19 +25,7 @@ Setting up Spotify logins for your application consists of 3 parts: ## Find your callback URL -The next step requires a callback URL, which looks like this: - -`https://.supabase.co/auth/v1/callback` - -- Go to your [Supabase Project Dashboard](https://app.supabase.com). -- 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 Spotify OAuth app @@ -60,13 +48,7 @@ Under `Redirect URIs`: ## Enter your Spotify credentials into your Supabase Project -- Go to your [Supabase Project Dashboard](https://app.supabase.com). -- 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 `Spotify Enabled` to ON. -- Enter your `Client ID` (`client_id`) and `Client Secret` (`client_secret`) saved in the previous step. -- Click `Save`. + ## Add login code to your client app diff --git a/apps/docs/pages/guides/auth/social-login/auth-twitch.mdx b/apps/docs/pages/guides/auth/social-login/auth-twitch.mdx index fab1f8e42e3..da36be88d84 100644 --- a/apps/docs/pages/guides/auth/social-login/auth-twitch.mdx +++ b/apps/docs/pages/guides/auth/social-login/auth-twitch.mdx @@ -30,19 +30,7 @@ Setting up Twitch logins for your application consists of 3 parts: ## 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.com). -- 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 Twitch Application @@ -71,13 +59,7 @@ In the next step you require a callback URL, which looks like this: ## Add your Twitch credentials into your Supabase Project -- Go to your [Supabase Project Dashboard](https://app.supabase.com) -- 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 `Twitch Enabled` to ON -- Enter your `client_id` and `client_secret` saved in the previous step -- Click `Save` + ## Add login code to your client app diff --git a/apps/docs/pages/guides/auth/social-login/auth-twitter.mdx b/apps/docs/pages/guides/auth/social-login/auth-twitter.mdx index 40cf31af0da..ca28d47a57c 100644 --- a/apps/docs/pages/guides/auth/social-login/auth-twitter.mdx +++ b/apps/docs/pages/guides/auth/social-login/auth-twitter.mdx @@ -6,7 +6,7 @@ export const meta = { description: 'Add Twitter OAuth to your Supabase project', } -To enable Twitter Auth for your project, you need to set up a Twitter OAuth application and add the application credentials to your Supabase Dashboard. +To enable Twitter Auth for your project, you need to set up a Twitter OAuth application with [elevated access](https://developer.twitter.com/en/portal/products/elevated)and add the application credentials in the Supabase Dashboard. ## Overview @@ -25,19 +25,7 @@ Setting up Twitter logins for your application consists of 3 parts: ## Find your callback URL -The next step requires a callback URL, which looks like this: - -`https://.supabase.co/auth/v1/callback` - -- Go to your [Supabase Project Dashboard](https://app.supabase.com). -- 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 Twitter OAuth app @@ -61,13 +49,7 @@ The next step requires a callback URL, which looks like this: ## Enter your Twitter credentials into your Supabase Project -- Go to your [Supabase Project Dashboard](https://app.supabase.com). -- 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 `Twitter Enabled` to ON. -- Enter your `API Key` (`client_id`) and `API Secret Key` (`client_secret`) saved in the previous step. -- Click `Save`. + ## Add login code to your client app diff --git a/apps/docs/pages/guides/auth/social-login/auth-workos.mdx b/apps/docs/pages/guides/auth/social-login/auth-workos.mdx index 806a838207a..4df551be6e4 100644 --- a/apps/docs/pages/guides/auth/social-login/auth-workos.mdx +++ b/apps/docs/pages/guides/auth/social-login/auth-workos.mdx @@ -48,12 +48,7 @@ You can pick between any one of the many identity providers that WorkOS supports ## Add your WorkOS credentials into your Supabase Project -- Go to your [Supabase Project Dashboard](https://app.supabase.com) -- In the left sidebar, click the `Authentication` icon (near the top) -- Click `Settings` from the list to go to the `Authentication Settings` page -- Under `External OAuth Providers` turn `WorkOS Enabled` to ON -- Enter the `Client ID`, `Secret`, and `WorkOS URL` saved in the previous steps. The ``WorkOS URL` setting should be set to https://api.workos.com/ -- Click `Save` + ## Add login code to your client app diff --git a/apps/docs/pages/guides/auth/social-login/auth-zoom.mdx b/apps/docs/pages/guides/auth/social-login/auth-zoom.mdx index 13d9de860c5..44e810aa256 100644 --- a/apps/docs/pages/guides/auth/social-login/auth-zoom.mdx +++ b/apps/docs/pages/guides/auth/social-login/auth-zoom.mdx @@ -25,19 +25,7 @@ Setting up Zoom logins for your application consists of 3 parts: ## Find your callback URL -The next step requires a callback URL, which looks like this: - -`https://.supabase.co/auth/v1/callback` - -- Go to your [Supabase Project Dashboard](https://app.supabase.com). -- 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 Zoom Oauth App @@ -61,13 +49,7 @@ Under `Redirect URL for OAuth` ## Enter your Zoom credentials into your Supabase Project -- Go to your [Supabase Project Dashboard](https://app.supabase.com) -- 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 `Zoom Enabled` to ON -- Enter your `Zoom Client ID` and `Zoom Client Secret` saved in the previous step -- Click `Save` + ## Add login code to your client app diff --git a/apps/docs/pages/guides/functions.mdx b/apps/docs/pages/guides/functions.mdx index fdceb0ceea9..9c970cb6bfe 100644 --- a/apps/docs/pages/guides/functions.mdx +++ b/apps/docs/pages/guides/functions.mdx @@ -29,7 +29,7 @@ Check out the [Edge Function Examples](https://github.com/supabase/supabase/tree
{examples.map((x) => ( -
+
diff --git a/apps/docs/pages/guides/getting-started/architecture.mdx b/apps/docs/pages/guides/getting-started/architecture.mdx index 91048898791..c97053b0c54 100644 --- a/apps/docs/pages/guides/getting-started/architecture.mdx +++ b/apps/docs/pages/guides/getting-started/architecture.mdx @@ -63,7 +63,7 @@ A scalable websocket engine for managing user Presence, broadcasting messages, a - Official Docs: [Supabase Realtime docs](/docs/guides/realtime) - Source code: [github.com/supabase/realtime](https://github.com/supabase/realtime) -- License: [Apache 2](https://github.com/supabase/realtime/blob/master/LICENSE) +- License: [Apache 2](https://github.com/supabase/realtime/blob/main/LICENSE) - Language: Elixir ### Storage API (large file storage) diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-nextjs.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-nextjs.mdx index df4d8171a4d..165c7c5052a 100644 --- a/apps/docs/pages/guides/getting-started/tutorials/with-nextjs.mdx +++ b/apps/docs/pages/guides/getting-started/tutorials/with-nextjs.mdx @@ -106,6 +106,7 @@ Wrap your `pages/_app.js` component with the `SessionContextProvider` component: import '../styles/globals.css' import { createBrowserSupabaseClient } from '@supabase/auth-helpers-nextjs' import { SessionContextProvider } from '@supabase/auth-helpers-react' +import { useState } from 'react' function MyApp({ Component, pageProps }) { const [supabase] = useState(() => createBrowserSupabaseClient()) @@ -125,6 +126,7 @@ export default MyApp Wrap your `pages/_app.tsx` component with the `SessionContextProvider` component: ```jsx lines=2,8 title=pages/_app.tsx +import { useState } from 'react' import { createBrowserSupabaseClient } from '@supabase/auth-helpers-nextjs' import { SessionContextProvider, Session } from '@supabase/auth-helpers-react' diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-solidjs.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-solidjs.mdx index f5a65665f3f..7de71d63910 100644 --- a/apps/docs/pages/guides/getting-started/tutorials/with-solidjs.mdx +++ b/apps/docs/pages/guides/getting-started/tutorials/with-solidjs.mdx @@ -134,9 +134,9 @@ interface Props { const Account: Component = ({ session }) => { const [loading, setLoading] = createSignal(true) - const [username, setUsername] = (createSignal < string) | (null > null) - const [website, setWebsite] = (createSignal < string) | (null > null) - const [avatarUrl, setAvatarUrl] = (createSignal < string) | (null > null) + const [username, setUsername] = createSignal(null) + const [website, setWebsite] = createSignal(null) + const [avatarUrl, setAvatarUrl] = createSignal(null) createEffect(() => { getProfile() diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-sveltekit.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-sveltekit.mdx index d8af92de291..2dc0cca9d0d 100644 --- a/apps/docs/pages/guides/getting-started/tutorials/with-sveltekit.mdx +++ b/apps/docs/pages/guides/getting-started/tutorials/with-sveltekit.mdx @@ -46,8 +46,8 @@ PUBLIC_SUPABASE_URL="YOUR_SUPABASE_URL" PUBLIC_SUPABASE_ANON_KEY="YOUR_SUPABASE_KEY" ``` -Now that we have the API credentials in place, let's create a helper file to initialize the Supabase client. These variables will be exposed -on the browser, and that's completely fine since we have [Row Level Security](/docs/guides/auth#row-level-security) enabled on our Database. +Now that we have the API credentials in place, create a `src/lib/supabaseClient.ts` helper file to initialize the Supabase client. +These variables will be exposed on the browser, and that's completely fine since we have [Row Level Security](/docs/guides/auth#row-level-security) enabled on our Database. ```js title=src/lib/supabaseClient.ts import { createClient } from '@supabase/auth-helpers-sveltekit' @@ -136,6 +136,7 @@ import '$lib/supabaseClient' ### Set up a Login component Let's set up a Svelte component to manage logins and sign ups. We'll use Magic Links, so users can sign in with their email without using passwords. +Create a new `Auth.svelte` component in the `src/routes` directory to handle this functionality. ```html title=src/routes/Auth.svelte