Skip to content

Commit

Permalink
finished auth readme
Browse files Browse the repository at this point in the history
  • Loading branch information
aleksanderbrymora committed Aug 21, 2020
1 parent 0a9abf2 commit 74c12ee
Showing 1 changed file with 75 additions and 2 deletions.
77 changes: 75 additions & 2 deletions docs/auth.md
Original file line number Diff line number Diff line change
Expand Up @@ -74,11 +74,17 @@ const Signout = () => {

### Sign up with email and password

To use this hook you need to pass `'emailPassword'` as the first parameter
To use this hook you need to pass `'emailPassword'` as the first parameter and an optional callback method - useful for redirects for example.

The way this hook works is that it gives you objects that have their own `onChange` and `onSubmit` handlers with other things inside of them that you simply spread on your inputs to add functionality to. Hook handles the rest.

```jsx
const Signup = () => {
const [ loading, error, { email, password, signup } ] = useAuth('emailPassword');
const [ loading, error, {
email,
password,
signup
} ] = useAuth('emailPassword', () => console.log('did it work?'));
return (
<form {...signup}>
<input {...email} />
Expand All @@ -90,4 +96,71 @@ const Signup = () => {
</form>
);
};
```

### Sign up with email, password and password confirmation

Similarly to email and password hook, you have to pass `'emailPasswordConfirm'` as the first parameter and optional callback function

```jsx
const SignupConfirm = () => {
const [ loading, error, {
email,
password,
confirmation,
onSignup
} ] = useAuth('emailPasswordConfirm', () => console.log('so performant wowowo'));
return (
<form {...onSignup}>
<input {...email} autoFocus />
<input {...password} />
<input {...confirmation} />
<button disabled={loading} type='submit'>
Sign up
</button>
<p>{JSON.stringify(error)}</p>
</form>
);
};
```

### Sign up with Auth Provider

When signing in with provider you must provide a string of which one you want to use:

- `google`
- `facebook`
- `twitter`
- `apple`
- `twitter`
- `github`
- `microsoft`
- `yahoo`

Then you can pass in two additional parameters. First of which is `providerOptions` about which you can learn more [here](https://firebase.google.com/docs/auth/web/google-signin).
The second optional parameter is a callback function.

```jsx
const Google = () => {
// simple version that works out of the box
const [loading, error, {popup}] = useAuth('google')
// or use full version
const [loading, error, { popup }] = useAuth(
'google',
{
scopes: ['your', 'scopes'],
customParameters: {}
},
() => console.log('yet another callback')
);
return (
<>
{error && JSON.stringify(error)}
<button disabled={loading} {...popup}>
Sign up with Google
</button>
</>
);
};

```

0 comments on commit 74c12ee

Please sign in to comment.