Skip to content

Commit 6bd6905

Browse files
tmmtmm
committed
docs: auth
1 parent 280c6f1 commit 6bd6905

File tree

13 files changed

+245
-43
lines changed

13 files changed

+245
-43
lines changed

‎README.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22

33
`react-supabase` is a React Hooks library for [Supabase](https://supabase.io).
44

5+
Visit the [docs site](https://react-supabase.vercel.app) for more info.
6+
57
<br/>
68

79
## Installation
@@ -14,7 +16,7 @@ npm install --save react-supabase @supabase/supabase-js
1416

1517
<br/>
1618

17-
## Usage
19+
## Quick Start
1820

1921
Create a Supabase client and pass it to the `Provider`:
2022

‎docs/pages/documentation/auth/use-auth-state-change.md‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,17 @@
11
# useAuthStateChange
22

3+
Receive a notification every time an auth event happens. Composed in the [User Context example](/documentation/recipes/user-context).
4+
35
```js
4-
useAuthStateChange((event, session) => {
5-
console.log(`Supbase auth event: ${event}`, session)
6-
})
6+
import { useAuthStateChange } from 'react-supabase'
7+
8+
function Page() {
9+
useAuthStateChange((event, session) => {
10+
console.log(`Supbase auth event: ${event}`, session)
11+
})
12+
13+
return ...
14+
}
715
```
16+
17+
Note: Auth listener automatically cleaned up during [cleanup phase](https://reactjs.org/docs/hooks-effect.html#effects-with-cleanup).

‎docs/pages/documentation/auth/use-reset-password.md‎

Lines changed: 24 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,28 @@
11
# useResetPassword
22

3+
Sends reset request to email address.
4+
35
```js
4-
const [{ error, fetching }, resetPassword] = useResetPassword({
5-
options: {
6-
redirectTo: 'https://example.com/welcome',
7-
},
8-
})
9-
10-
const { error } = await resetPassword('user@example.com', {
11-
redirectTo: 'https://example.com/reset',
12-
})
6+
import { useResetPassword } from 'react-supabase'
7+
8+
function Page() {
9+
const [{ error, fetching }, resetPassword] = useResetPassword({
10+
// Passing optional options
11+
options: {
12+
redirectTo: 'https://example.com/welcome',
13+
},
14+
})
15+
16+
async function onClickResetPassword() {
17+
const { error } = await resetPassword('user@example.com', {
18+
// Override options from hook init
19+
redirectTo: 'https://example.com/reset',
20+
})
21+
}
22+
23+
if (error) return <div>Error sending email</div>
24+
if (fetching) return <div>Sending reset email</div>
25+
26+
return ...
27+
}
1328
```

‎docs/pages/documentation/auth/use-signin.md‎

Lines changed: 54 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,65 @@
11
# useSignIn
22

3+
Log in existing user, or login via a third-party provider.
4+
5+
```js
6+
import { useSignIn } from 'react-supabase'
7+
8+
function Page() {
9+
const [{ error, fetching, session, user }, signIn] = useSignIn({
10+
// Passing optional options
11+
options: {
12+
redirectTo: 'https://example.com/dashboard',
13+
},
14+
})
15+
16+
async function onClickSignIn() {
17+
const { error, session, user } = await signIn(
18+
{
19+
email: 'user@example.com',
20+
password: 'foobarbaz',
21+
},
22+
{
23+
// Override options from hook init
24+
redirectTo: 'https://example.com/account',
25+
},
26+
)
27+
}
28+
29+
if (error) return <div>Error signing in</div>
30+
if (fetching) return <div>Signing in</div>
31+
if (user) return <div>Logged in</div>
32+
33+
return ...
34+
}
35+
```
36+
37+
## Magic links
38+
39+
Omit password from the execute function:
40+
41+
```js
42+
const { error, session, user } = await signIn({ email: 'user@example.com' })
43+
```
44+
45+
## Third-party providers
46+
47+
Either pass a provider (and scopes) during hook initialization:
48+
349
```js
450
const [{ error, fetching, user, session }, signIn] = useSignIn({
5-
// provider: 'github',
51+
provider: 'github',
652
options: {
7-
redirectTo: 'https://example.com/dashboard',
8-
// scopes: 'repo gist notifications',
53+
scopes: 'repo gist notifications',
954
},
1055
})
56+
```
57+
58+
Or the execute function:
1159

60+
```js
1261
const { error, session, user } = await signIn(
13-
{
14-
email: 'user@example.com',
15-
password: 'foobarbaz', // omit for magic link
16-
// provider: 'github',
17-
},
18-
{
19-
redirectTo: 'https://example.com/dashboard',
20-
// scopes: 'repo gist notifications',
21-
},
62+
{ provider: 'github' },
63+
{ scopes: 'repo gist notifications' },
2264
)
2365
```

‎docs/pages/documentation/auth/use-signout.md‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,20 @@
11
# useSignOut
22

3+
Remove logged in user and trigger a `SIGNED_OUT` event.
4+
35
```js
4-
const [{ error, fetching }, signOut] = useSignOut()
6+
import { useSignOut } from 'react-supabase'
7+
8+
function Page() {
9+
const [{ error, fetching }, signOut] = useSignOut()
10+
11+
async function onClickSignOut() {
12+
const { error } = await signOut()
13+
}
14+
15+
if (error) return <div>Error signing out</div>
16+
if (fetching) return <div>Signing out</div>
517

6-
const { error } = await signOut()
18+
return ...
19+
}
720
```

‎docs/pages/documentation/auth/use-signup.md‎

Lines changed: 30 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,35 @@
11
# useSignUp
22

3+
Creates new user.
4+
35
```js
4-
const [{ error, fetching, user, session }, signUp] = useSignUp({
5-
options: {
6-
redirectTo: 'https://example.com/dashboard',
7-
},
8-
})
6+
import { useSignUp } from 'react-supabase'
7+
8+
function Page() {
9+
const [{ error, fetching, session, user }, signUp] = useSignUp({
10+
// Passing optional options
11+
options: {
12+
redirectTo: 'https://example.com/dashboard',
13+
},
14+
})
15+
16+
async function onClickSignUp() {
17+
const { error, session, user } = await signUp(
18+
{
19+
email: 'user@example.com',
20+
password: 'foobarbaz',
21+
},
22+
{
23+
// Override options from hook init
24+
redirectTo: 'https://example.com/welcome',
25+
},
26+
)
27+
}
28+
29+
if (error) return <div>Error signing up</div>
30+
if (fetching) return <div>Signing up</div>
31+
if (user) return <div>Welcome user</div>
932

10-
const { error, session, user } = await signUp(
11-
{
12-
email: 'user@example.com',
13-
password: 'foobarbaz',
14-
},
15-
{
16-
redirectTo: 'https://example.com/dashboard',
17-
},
18-
)
33+
return ...
34+
}
1935
```

‎docs/pages/documentation/meta.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,6 @@
22
"provider": "Provider",
33
"use-client": "useClient",
44
"auth": "Auth",
5-
"data": "Data"
5+
"data": "Data",
6+
"recipes": "Recipes"
67
}

‎docs/pages/documentation/provider.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,18 @@
11
# Provider
2+
3+
In order to use a Supabase client, you need to provide it via the [Context API](https://reactjs.org/docs/context.html). This may be done with the help of the Provider export.
4+
5+
```js
6+
import { createClient } from '@supabase/supabase-js'
7+
import { Provider } from 'react-supabase'
8+
9+
const client = createClient('https://xyzcompany.supabase.co', 'public-anon-key')
10+
11+
const App = () => (
12+
<Provider value={client}>
13+
<YourRoutes />
14+
</Provider>
15+
)
16+
```
17+
18+
All examples and code snippets from now on assume that they are wrapped in a `Provider`.

‎docs/pages/documentation/recipes/meta.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"user-context": "UserContext"
3+
}

‎docs/pages/documentation/recipes/user-context.md‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
# User Context
2+
3+
Keep track of the authenticated user using the [Context API](https://reactjs.org/docs/context.html) and `useAuthStateChange` hook. First, create a context and user hook:
4+
5+
```js
6+
import { createContext, useEffect, useState } from 'react'
7+
import { useAuthStateChange, useClient } from 'react-supabase'
8+
9+
const initialState = { session: null, user: null }
10+
export const UserContext = createContext(initialState)
11+
12+
export const UserProvider = ({ children }) => {
13+
const client = useClient()
14+
const [state, setState] = useState(initialState)
15+
16+
useEffect(() => {
17+
const session = client.auth.session()
18+
setState({ session, user: session?.user ?? null })
19+
}, [])
20+
21+
useAuthStateChange((event, session) => {
22+
console.log(`Supbase auth event: ${event}`, session)
23+
setState({ session, user: session?.user ?? null })
24+
})
25+
26+
return (
27+
<UserContext.Provider value={state}>
28+
{children}
29+
</UserContext.Provider>
30+
)
31+
}
32+
33+
export const useUser = () => {
34+
const context = useContext(UserContext)
35+
if (context === undefined) {
36+
throw Error('useUser must be used within UserProvider')
37+
return context
38+
}
39+
```
40+
41+
Wrap your app in `UserProvider` and use the `useUser` hook in your components:
42+
43+
```js
44+
function LoggedInView() {
45+
const { session, user } = useUser()
46+
47+
if (!session) return <Error />
48+
return (
49+
<div>
50+
{JSON.stringify(session)}
51+
{JSON.stringify(user)}
52+
</div>
53+
)
54+
}
55+
```

0 commit comments

Comments
 (0)