Auth
Authentication components
Auth
A general button with various visual variations
Installing
Install the component
npm install @supabase/ui
Getting started
Import the component
@import { Button } from '@supabase/ui'
Basic
1import { Auth, Typography, Button } from "@supabase/ui";
2import { createClient } from "@supabase/supabase-js";
3
4const supabase = createClient(
5 "https://rsnibhkhsbfnncjmwnkj.supabase.co",
6 "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyb2xlIjoiYW5vbiIsImlhdCI6MTYxNTIxNDE1MywiZXhwIjoxOTMwNzkwMTUzfQ.OQEbAaTfgDdLCCht251P2JRD3QDnui6nsU8N-tZA_Mc"
7);
8
9const Container = (props) => {
10 const { user } = Auth.useUser();
11 if (user)
12 return (
13 <>
14 <Typography.Text>Signed in: {user.email}</Typography.Text>
15 <Button block onClick={() => props.supabaseClient.auth.signOut()}>
16 Sign out
17 </Button>
18 </>
19 );
20 return props.children;
21};
22
23export default function AuthBasic() {
24 return (
25 <Auth.UserContextProvider supabaseClient={supabase}>
26 <Container supabaseClient={supabase}>
27 <Auth supabaseClient={supabase} />
28 </Container>
29 </Auth.UserContextProvider>
30 );
31}
32
Let's define a story for our Badge component:
Button types
You can define the type of a button using the type prop.
There are primary, default, secondary, outline, dashed, and text,
Size
You can define the size of a button using the size prop.
There are tiny, small, medium, large and xlarge. The default size is tiny
Using icons
Icons can be used with a Button. You can import an Icon component from Supabase UI
If you use Icons from the Supabase UI library, the Icon will respect the size of the Button. For example: if the Button is shown in Xlarge, then the Icon will be shown in XLarge.