Skip to content

Commit 32acbff

Browse files
committed
Create hooks useDeleteUser and useSignOut
1 parent edab3f3 commit 32acbff

File tree

4 files changed

+170
-0
lines changed

4 files changed

+170
-0
lines changed

auth/README.md

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@ List of Auth hooks:
2525
- [useUpdateProfile](#useupdateprofile)
2626
- [useSendPasswordResetEmail](#usesendpasswordresetemail)
2727
- [useSendEmailVerification](#usesendemailverification)
28+
- [useSignOut](#usesignout)
29+
- [useDeleteUser](#usedeleteuser)
2830

2931
### useAuthState
3032

@@ -744,3 +746,105 @@ const SendEmailVerification = () => {
744746
);
745747
};
746748
```
749+
750+
### useSignOut
751+
752+
```js
753+
const [signOut, loading, error] = useSignOut(auth);
754+
```
755+
756+
Sign out current user. Wraps the underlying `auth.signOut` method and provides additional `loading` and `error` information.
757+
758+
The `useSignOut` hook takes the following parameters:
759+
760+
- `auth`: `Auth` instance for the app you would like to monitor
761+
762+
Returns:
763+
764+
- `signOut()`: A `() => Promise<void>` function you can call to sign out current user
765+
- `loading`: A `boolean` to indicate whether operation is loading
766+
- `error`: Any `Error` returned by Firebase when trying to sign out user, or `undefined` if there is no error
767+
768+
#### Full Example
769+
770+
```jsx
771+
import { useSignOut } from 'react-firebase-hooks/auth';
772+
773+
const SignOut = () => {
774+
const [signOut, loading, error] = useSignOut(auth);
775+
776+
if (error) {
777+
return (
778+
<div>
779+
<p>Error: {error.message}</p>
780+
</div>
781+
);
782+
}
783+
if (loading) {
784+
return <p>Loading...</p>;
785+
}
786+
return (
787+
<div className="App">
788+
<button
789+
onClick={async () => {
790+
await signOut();
791+
alert('You are sign out');
792+
}}
793+
>
794+
Sign out
795+
</button>
796+
</div>
797+
);
798+
};
799+
```
800+
801+
### useDeleteUser
802+
803+
```js
804+
const [deleteUser, loading, error] = useDeleteUser(auth);
805+
```
806+
807+
Delete current user. Wraps the underlying `auth.currrentUser.signOut` method and provides additional `loading` and `error` information.
808+
809+
The `useDeleteUser` hook takes the following parameters:
810+
811+
- `auth`: `Auth` instance for the app you would like to monitor
812+
813+
Returns:
814+
815+
- `deleteUser()`: A `() => Promise<void>` function you can call to sign out current user
816+
- `loading`: A `boolean` to indicate whether operation is loading
817+
- `error`: Any `Error` returned by Firebase when trying to delete user, or `undefined` if there is no error
818+
819+
#### Full Example
820+
821+
```jsx
822+
import { useDeleteUser } from 'react-firebase-hooks/auth';
823+
824+
const DeleteUser = () => {
825+
const [deleteUser, loading, error] = useDeleteUser(auth);
826+
827+
if (error) {
828+
return (
829+
<div>
830+
<p>Error: {error.message}</p>
831+
</div>
832+
);
833+
}
834+
if (loading) {
835+
return <p>Loading...</p>;
836+
}
837+
return (
838+
<div className="App">
839+
<button
840+
onClick={async () => {
841+
await deleteUser();
842+
alert('You have been deleted');
843+
}}
844+
>
845+
Delete current user
846+
</button>
847+
</div>
848+
);
849+
};
850+
```

auth/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ export {
88
default as useSendPasswordResetEmail,
99
SendPasswordResetEmailHook,
1010
} from './useSendPasswordResetEmail';
11+
export { default as useSignOut, SignOutHook } from './useSignOut';
12+
export { default as useDeleteUser, DeleteUserHook } from './useDeleteUser';
1113
export { default as useSignInWithEmailAndPassword } from './useSignInWithEmailAndPassword';
1214
export {
1315
useSignInWithApple,

auth/useDeleteUser.ts

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { Auth, AuthError } from 'firebase/auth';
2+
import { useMemo, useState } from 'react';
3+
4+
export type DeleteUserHook = [
5+
() => Promise<void>,
6+
boolean,
7+
AuthError | Error | undefined
8+
];
9+
10+
export default (auth: Auth): DeleteUserHook => {
11+
const [error, setError] = useState<AuthError>();
12+
const [loading, setLoading] = useState<boolean>(false);
13+
14+
const deleteUser = async () => {
15+
setLoading(true);
16+
setError(undefined);
17+
try {
18+
if (auth.currentUser) {
19+
await auth.currentUser.delete();
20+
} else {
21+
setError(new Error('No user is logged in') as AuthError);
22+
}
23+
} catch (err) {
24+
setError(err as AuthError);
25+
} finally {
26+
setLoading(false);
27+
}
28+
};
29+
30+
const resArray: DeleteUserHook = [deleteUser, loading, error];
31+
return useMemo<DeleteUserHook>(() => resArray, resArray);
32+
};

auth/useSignOut.ts

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { Auth, AuthError } from 'firebase/auth';
2+
import { useMemo, useState } from 'react';
3+
4+
export type SignOutHook = [
5+
() => Promise<void>,
6+
boolean,
7+
AuthError | Error | undefined
8+
];
9+
10+
export default (auth: Auth): SignOutHook => {
11+
const [error, setError] = useState<AuthError>();
12+
const [loading, setLoading] = useState<boolean>(false);
13+
14+
const signOut = async () => {
15+
setLoading(true);
16+
setError(undefined);
17+
try {
18+
if (auth.currentUser) {
19+
await auth.signOut();
20+
} else {
21+
setError(new Error('No user is logged in') as AuthError);
22+
}
23+
} catch (err) {
24+
setError(err as AuthError);
25+
} finally {
26+
setLoading(false);
27+
}
28+
};
29+
30+
const resArray: SignOutHook = [signOut, loading, error];
31+
return useMemo<SignOutHook>(() => resArray, resArray);
32+
};

0 commit comments

Comments
 (0)