From eec67e7cccc4ea8774ea0b4f4537364dcadd99c1 Mon Sep 17 00:00:00 2001 From: dannykng Date: Fri, 19 Aug 2022 20:30:38 -0700 Subject: [PATCH 1/4] Revise Auth UI guide --- .../{auth-ui-overview.mdx => auth-ui.mdx} | 130 +++++++++--------- 1 file changed, 65 insertions(+), 65 deletions(-) rename apps/reference/docs/guides/auth/auth-helpers/{auth-ui-overview.mdx => auth-ui.mdx} (54%) diff --git a/apps/reference/docs/guides/auth/auth-helpers/auth-ui-overview.mdx b/apps/reference/docs/guides/auth/auth-helpers/auth-ui.mdx similarity index 54% rename from apps/reference/docs/guides/auth/auth-helpers/auth-ui-overview.mdx rename to apps/reference/docs/guides/auth/auth-helpers/auth-ui.mdx index f7553948c66..8e7a277f46b 100644 --- a/apps/reference/docs/guides/auth/auth-helpers/auth-ui-overview.mdx +++ b/apps/reference/docs/guides/auth/auth-helpers/auth-ui.mdx @@ -1,28 +1,38 @@ --- -id: auth-ui-overview +id: auth-ui title: Auth UI -description: Securing your user data with Row Level Security. +description: A React component for authenticating users. --- -# Auth UI +Auth UI is a pre-built React component for authenticating users. +It supports custom themes and extensible styles to match your brand and aesthetic. -Auth UI is a React component that provides a simple way to authenticate users. + -It is currently only available for React, however it is planned to be available for other frameworks. +## Set up Auth UI -Auth UI relies on [@supabase/supabase-js](/docs/reference/javascript/next/). You need to also [install @supabase/supabase-js](/docs/reference/javascript/next/installing). - -### Install via NPM - -Install the NPM package from @supabase/react-ui-react +Auth UI relies on [supabase-js](/docs/reference/javascript/next/). Install the latest version: ```bash -npm install @supabase/react-ui-react @supabase/supabase-js@rc +npm install @supabase/supabase-js@rc ``` -### Import Auth component +Install the Auth UI package: -The simplest way to use the component is to pass `supabaseClient` from @supabase/supabase-js as a prop to the component. +```bash +npm install @supabase/auth-ui-react +``` + +### Import the Auth component + +Pass `supabaseClient` from `@supabase/supabase-js` as a prop to the component. ```js title="/src/index.js" import { createClient } from '@supabase/supabase-js' @@ -36,52 +46,44 @@ const supabase = createClient( const App = () => ``` -The example above renders the Auth component without any styling. - -We recommend using one of the themes provided to style the UI. +This renders the Auth component without any styling. +We recommend using one of the predefined themes to style the UI. Import the theme you want to use and pass it to the `appearence.theme` prop. ```diff js title="/src/index.js" import { Auth, -+ ThemeSupa + // highlight-next-line + ThemeSupa } from '@supabase/react-ui-react' const App = () => ( ) ``` -# Customizing Auth UI - -Auth UI is a React component that provides a UI that 'works out of the box'. +## Customization There are several ways to customize Auth UI: -- Using one of the [predefined Themes](#themes) that comes with Auth UI. -- Extending a theme by [overriding the variable tokens](#overwriting-themes) in a theme. -- [Creating your own Theme](#creating-your-own-theme) -- [Using your own CSS classes](#using-your-own-css-classes) -- [Using inline styles](#using-your-own-inline-styles) -- [Using your own labels](#using-your-own-custom-labels) - ---- - -## Themes +- Use one of the [predefined themes](#predefined-themes) that comes with Auth UI +- Extend a theme by [overriding the variable tokens](#override-themes) in a theme +- [Create your own theme](#create-theme) +- [Use your own CSS classes](#custom-css-classes) +- [Use inline styles](#custom-inline-styles) +- [Use your own labels](#custom-labels) ### Predefined themes -Auth UI comes with several themes to customize the appearance. - -Each predefined theme comes with at least 2 variations, a `default` variation, and a `dark` variation. You can switch between these themes using the `theme` prop. - -Import the theme you want to use and pass it to the `appearence.theme` prop. +Auth UI comes with several themes to customize the appearance. Each predefined theme comes with at least two variations, a `default` variation, and a `dark` variation. You can switch between these themes using the `theme` prop. Import the theme you want to use and pass it to the `appearence.theme` prop. ```js title="/src/index.js" import { createClient } from '@supabase/supabase-js' +//highlight-next-line import { Auth, ThemeSupa } from '@supabase/react-ui-react' const supabase = createClient( @@ -90,19 +92,21 @@ const supabase = createClient( ) const App = () => ( - + ) ``` :::info - -Currently there is only 1 predefined theme available, but we plan to add more. - +Currently there is only one predefined theme available, but we plan to add more. ::: -### Switching theme variations +### Switch theme variations -Auth UI comes with 2 theme variations: `default` and `dark`. You can switch between these themes by using the `theme` prop. +Auth UI comes with two theme variations: `default` and `dark`. You can switch between these themes with the `theme` prop. ```js title="/src/index.js" import { createClient } from '@supabase/supabase-js' @@ -117,18 +121,17 @@ const App = () => ( ) ``` -If you don't pass a value to `theme` it will use the `"default"` theme. You can pass `"dark"` to the theme prop to switch to the `dark` theme. If your theme has other variations, use the name of the variation in this prop. +If you don't pass a value to `theme` it uses the `"default"` theme. You can pass `"dark"` to the theme prop to switch to the `dark` theme. If your theme has other variations, use the name of the variation in this prop. -## Overwriting themes +### Override themes -Auth UI themes can be overridden using variable tokens. - -The available variable tokens [can be viewed here](https://github.com/supabase-community/auth-ui/blob/main/packages/react/common/theming/Themes.tsx). +Auth UI themes can be overridden using variable tokens. See the [list of variable tokens](https://github.com/supabase-community/auth-ui/blob/main/packages/react/common/theming/Themes.tsx). ```js title="/src/index.js" import { createClient } from '@supabase/supabase-js' @@ -144,6 +147,7 @@ const App = () => ( supabaseClient={supabase} appearance={{ theme: ThemeSupa, + // highlight-start variables: { default: { colors: { @@ -152,16 +156,18 @@ const App = () => ( }, }, }, + // highlight-end }} /> ) ``` -If you are using a theme that you have created, you will probably not need to override any of the them. +If you created your own theme, you may not need to override any of the them. -## Creating your own theme +### Create your own theme {#create-theme} -The available tokens within a theme [can be viewed here](https://github.com/supabase-community/auth-ui/blob/main/packages/react/common/theming/Themes.tsx). You can create your own theme by following the same structure within a `appearance.theme` property. +You can create your own theme by following the same structure within a `appearance.theme` property. +See the list of [tokens within a theme](https://github.com/supabase-community/auth-ui/blob/main/packages/react/common/theming/Themes.tsx). ```js title="/src/index.js" import { createClient } from '@supabase/supabase-js' @@ -208,13 +214,11 @@ const App = () => ( ) ``` -You can swich between different variations of your theme [by using the "theme" prop](#switching-theme-variations). +You can swich between different variations of your theme with the ["theme" prop](#switch-theme-variations). -## Custom CSS classes {#custom-css-classes} +### Custom CSS classes {#custom-css-classes} -You can use custom CSS classes with Auth UI. - -The elements available that can have a CSS classname applied are the following: +You can use custom CSS classes for the following elements: `"button"`, `"container"`, `"anchor"`, `"divider"`, `"label"`, `"input"`, `"loader"`, `"message"`. ```js title="/src/index.js" @@ -240,11 +244,9 @@ const App = () => ( ) ``` -## Customized inline CSS {#custom-css-inline} +### Custom inline CSS {#custom-inline-styles} -You can use custom CSS inline styles with Auth UI. - -The elements available that can have CSS inline style applied are the following: +You can use custom CSS inline styles for the following elements: `"button"`, `"container"`, `"anchor"`, `"divider"`, `"label"`, `"input"`, `"loader"`, `"message"`. ```js title="/src/index.js" @@ -270,13 +272,9 @@ const App = () => ( ) ``` -## Custom labels {#custom-labels} +### Custom labels {#custom-labels} -You can use your own labels with Auth UI. - -A breakdown of what labels can be overwritten [can be viewed on GitHub](https://github.com/supabase-community/auth-ui/blob/main/packages/react/common/lib/Localization/en.json). - -You can add your custom labels to `localization.variables`. +You can use custom labels with `localization.variables`. See the [list of labels](https://github.com/supabase-community/auth-ui/blob/main/packages/react/common/lib/Localization/en.json) that can be overwritten. ```js title="/src/index.js" import { createClient } from '@supabase/supabase-js' @@ -290,6 +288,7 @@ const supabase = createClient( const App = () => ( ( }, }, }} + //highlight-end /> ) ``` From 69dc3027b2f713384c28a652209e21e5d7697890 Mon Sep 17 00:00:00 2001 From: dannykng Date: Fri, 19 Aug 2022 20:31:21 -0700 Subject: [PATCH 2/4] Update URL --- apps/reference/nav/_referenceSidebars.js | 2 +- apps/www/_blog/2022-08-19-launch-week-5-one-more-thing.mdx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/reference/nav/_referenceSidebars.js b/apps/reference/nav/_referenceSidebars.js index a8212d32cb3..daeefbcfa4f 100644 --- a/apps/reference/nav/_referenceSidebars.js +++ b/apps/reference/nav/_referenceSidebars.js @@ -90,7 +90,7 @@ const sidebars = { type: 'category', label: 'Auth Helpers', collapsed: true, - items: ['guides/auth/auth-helpers/auth-ui-overview'], + items: ['guides/auth/auth-helpers/auth-ui'], }, { type: 'category', diff --git a/apps/www/_blog/2022-08-19-launch-week-5-one-more-thing.mdx b/apps/www/_blog/2022-08-19-launch-week-5-one-more-thing.mdx index d1b7045636e..1bf4d3bf1cc 100644 --- a/apps/www/_blog/2022-08-19-launch-week-5-one-more-thing.mdx +++ b/apps/www/_blog/2022-08-19-launch-week-5-one-more-thing.mdx @@ -57,7 +57,7 @@ A new feature in Auth UI is custom labels. You can now override any of the text Our initial release supports React, but we have prepared the repo for other frameworks. This release is a small step towards a larger feature—“_Hosted Auth Pages_”. The wide range of customization will become useful for developers to tweak their Hosted Auth pages to reflect their brand personality. -[View the docs](/docs/guides/auth/auth-helpers/auth-ui-overview). +[View the docs](/docs/guides/auth/auth-helpers/auth-ui). --- From 59c81704548bf310f198784d7f1ffb05ea50ed7f Mon Sep 17 00:00:00 2001 From: dannykng Date: Fri, 19 Aug 2022 20:31:32 -0700 Subject: [PATCH 3/4] Add redirect --- apps/www/next.config.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/apps/www/next.config.js b/apps/www/next.config.js index 11a336c8666..f0fbd013226 100644 --- a/apps/www/next.config.js +++ b/apps/www/next.config.js @@ -1434,6 +1434,11 @@ module.exports = withMDX({ source: '/docs/guides/realtime/overview', destination: '/docs/guides/realtime', }, + { + permanent: true, + source: '/docs/guides/auth/auth-helpers/auth-ui-overview', + destination: '/docs/guides/auth/auth-helpers/auth-ui', + }, // V2 redirects // { // permanent: true, From 21bbda96000e6f77555b65783b35b4ac7c2615e6 Mon Sep 17 00:00:00 2001 From: dannykng Date: Fri, 19 Aug 2022 20:35:06 -0700 Subject: [PATCH 4/4] Update description --- apps/reference/docs/guides/auth/auth-helpers/auth-ui.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/reference/docs/guides/auth/auth-helpers/auth-ui.mdx b/apps/reference/docs/guides/auth/auth-helpers/auth-ui.mdx index 8e7a277f46b..e0e162ca768 100644 --- a/apps/reference/docs/guides/auth/auth-helpers/auth-ui.mdx +++ b/apps/reference/docs/guides/auth/auth-helpers/auth-ui.mdx @@ -1,7 +1,7 @@ --- id: auth-ui title: Auth UI -description: A React component for authenticating users. +description: A prebuilt, customizable React component for authenticating users. --- Auth UI is a pre-built React component for authenticating users.