https://github.com/matterhorn-studios/reactfbauth
A simple ReactJS package ment to make ReactJS/NextJS Firebase authentication easy.
https://github.com/matterhorn-studios/reactfbauth
authentication firebase firebase-auth nextjs react typescript
Last synced: 2 months ago
JSON representation
A simple ReactJS package ment to make ReactJS/NextJS Firebase authentication easy.
- Host: GitHub
- URL: https://github.com/matterhorn-studios/reactfbauth
- Owner: Matterhorn-Studios
- License: mit
- Created: 2022-06-05T20:56:36.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-06-06T23:30:33.000Z (about 4 years ago)
- Last Synced: 2025-04-05T08:14:33.340Z (about 1 year ago)
- Topics: authentication, firebase, firebase-auth, nextjs, react, typescript
- Language: TypeScript
- Homepage:
- Size: 178 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ReactFBAuth
A simple react package ment to make React/NextJS firebase authentication easy.
### Built with Firebase web V9
_currently supports email/password and Google authentication, more will be added soon_
## Setup and Usage
#### Create a Firebase config file
This file will house your Firebase config as well as auth object and its providers. Config object comes from Firebase console.
```typescript
import { initializeApp } from "firebase/app";
import { getAuth, GoogleAuthProvider } from "firebase/auth";
const firebaseConfig = {
apiKey: "API-KEY",
authDomain: "EXAMPLE-DOMAIN.firebaseapp.com",
projectId: "PROJECT-ID",
storageBucket: "DOMAIN.appspot.com",
messagingSenderId: "ID",
appId: "ID",
measurementId: "ID",
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
// init auth
export const auth = getAuth(app);
// init google provider
export const gProvider = new GoogleAuthProvider();
gProvider.setCustomParameters({ prompt: "select_account" });
```
#### Add the provider to main
The provider takes in the auth object, the google provider, and the persistence type (https://firebase.google.com/docs/auth/web/auth-state-persistence).
```typescript
import { auth, gProvider } from "./firebase_client";
import { browserLocalPersistence } from "firebase/auth";
ReactDOM.createRoot(document.getElementById("root")!).render(
);
```
#### Use anywhere
Basic App.tsx example:
```typescript
import { useFBAuth } from "@matterhorn-studios/react-fb-auth";
function App() {
const { user, loading, error, googleSignIn, logOut } = useFBAuth();
if (loading) return
LOADING
;
if (error) return Error: {error.message}
;
return (
{user ? (
<>
{user.displayName}
log out
>
) : (
<>
no user found
google sign in
>
)}
);
}
export default App;
```
#### Methods on useFBAuth()
- `googleSignIn` Prompts the user to sign in with google, populates the user, loading, and error object
- `emailSignIn(email: string, password: string)` Signs the user in with the provided email and password, populates the user, loading, and error object
- `emailSignUp(email: string, password: string)` Signs the user up with the provided email and password, populates the user, loading, and error object
- `logOut` Logs the user out
- `clearError` Clears the error object (resets it to null)