Skip to content

Update dependencies: 🔥 Firebase 9 and Firebaseui 0.600 #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 3, 2021
Merged

Update dependencies: 🔥 Firebase 9 and Firebaseui 0.600 #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 19 additions & 14 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,15 +48,16 @@ Below is an example on how to use `FirebaseAuth` with a redirect upon sign-in:
// Import FirebaseAuth and firebase.
import React from 'react';
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
import firebase from 'firebase';
import { initializeApp } from 'firebase/app';
import { getAuth, EmailAuthProvider, GoogleAuthProvider } from 'firebase/auth';

// Configure Firebase.
const config = {
apiKey: 'AIzaSyAeue-AsYu76MMQlTOM-KlbYBlusW9c1FM',
authDomain: 'myproject-1234.firebaseapp.com',
// ...
};
firebase.initializeApp(config);
const firebaseApp = initializeApp(firebaseConfig);

// Configure FirebaseUI.
const uiConfig = {
Expand All @@ -66,17 +67,19 @@ const uiConfig = {
signInSuccessUrl: '/signedIn',
// We will display Google and Facebook as auth providers.
signInOptions: [
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
firebase.auth.FacebookAuthProvider.PROVIDER_ID,
GoogleAuthProvider.PROVIDER_ID,
FacebookAuthProvider.PROVIDER_ID,
],
};

function SignInScreen() {
const auth = getAuth(firebaseApp)

return (
<div>
<h1>My App</h1>
<p>Please sign-in:</p>
<StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()} />
<StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={auth} />
</div>
);
}
Expand All @@ -92,24 +95,25 @@ Below is an example on how to use `StyledFirebaseAuth` with a state change upon
// Import FirebaseAuth and firebase.
import React, { useEffect, useState } from 'react';
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
import firebase from 'firebase';
import { initializeApp } from 'firebase/app';
import { getAuth, onAuthStateChanged, signOut, EmailAuthProvider, GoogleAuthProvider } from 'firebase/auth';

// Configure Firebase.
const config = {
apiKey: 'AIzaSyAeue-AsYu76MMQlTOM-KlbYBlusW9c1FM',
authDomain: 'myproject-1234.firebaseapp.com',
// ...
};
firebase.initializeApp(config);
const firebaseApp = initializeApp(firebaseConfig);

// Configure FirebaseUI.
const uiConfig = {
// Popup signin flow rather than redirect flow.
signInFlow: 'popup',
// We will display Google and Facebook as auth providers.
signInOptions: [
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
firebase.auth.FacebookAuthProvider.PROVIDER_ID
GoogleAuthProvider.PROVIDER_ID,
FacebookAuthProvider.PROVIDER_ID
],
callbacks: {
// Avoid redirects after sign-in.
Expand All @@ -118,11 +122,12 @@ const uiConfig = {
};

function SignInScreen() {
const auth = getAuth(firebaseApp);
const [isSignedIn, setIsSignedIn] = useState(false); // Local signed-in state.

// Listen to the Firebase Auth state and set the local state.
useEffect(() => {
const unregisterAuthObserver = firebase.auth().onAuthStateChanged(user => {
const unregisterAuthObserver = onAuthStateChanged(auth, user => {
setIsSignedIn(!!user);
});
return () => unregisterAuthObserver(); // Make sure we un-register Firebase observers when the component unmounts.
Expand All @@ -133,15 +138,15 @@ function SignInScreen() {
<div>
<h1>My App</h1>
<p>Please sign-in:</p>
<StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()} />
<StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={auth} />
</div>
);
}
return (
<div>
<h1>My App</h1>
<p>Welcome {firebase.auth().currentUser.displayName}! You are now signed-in!</p>
<a onClick={() => firebase.auth().signOut()}>Sign-out</a>
<p>Welcome {auth.currentUser.displayName}! You are now signed-in!</p>
<a onClick={() => signOut(auth)}>Sign-out</a>
</div>
);
}
Expand All @@ -161,7 +166,7 @@ return (
<div>
<h1>My App</h1>
<p>Please sign-in:</p>
<StyledFirebaseAuth uiCallback={ui => ui.disableAutoSignIn()} uiConfig={uiConfig} firebaseAuth={firebase.auth()}/>
<StyledFirebaseAuth uiCallback={ui => ui.disableAutoSignIn()} uiConfig={uiConfig} firebaseAuth={auth}/>
</div>
);
```
Expand Down
33 changes: 19 additions & 14 deletions dist/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,15 +48,16 @@ Below is an example on how to use `FirebaseAuth` with a redirect upon sign-in:
// Import FirebaseAuth and firebase.
import React from 'react';
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
import firebase from 'firebase';
import { initializeApp } from 'firebase/app';
import { getAuth, EmailAuthProvider, GoogleAuthProvider } from 'firebase/auth';

// Configure Firebase.
const config = {
apiKey: 'AIzaSyAeue-AsYu76MMQlTOM-KlbYBlusW9c1FM',
authDomain: 'myproject-1234.firebaseapp.com',
// ...
};
firebase.initializeApp(config);
const firebaseApp = initializeApp(firebaseConfig);

// Configure FirebaseUI.
const uiConfig = {
Expand All @@ -66,17 +67,19 @@ const uiConfig = {
signInSuccessUrl: '/signedIn',
// We will display Google and Facebook as auth providers.
signInOptions: [
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
firebase.auth.FacebookAuthProvider.PROVIDER_ID,
GoogleAuthProvider.PROVIDER_ID,
FacebookAuthProvider.PROVIDER_ID,
],
};

function SignInScreen() {
const auth = getAuth(firebaseApp)

return (
<div>
<h1>My App</h1>
<p>Please sign-in:</p>
<StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()} />
<StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={auth} />
</div>
);
}
Expand All @@ -92,24 +95,25 @@ Below is an example on how to use `StyledFirebaseAuth` with a state change upon
// Import FirebaseAuth and firebase.
import React, { useEffect, useState } from 'react';
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
import firebase from 'firebase';
import { initializeApp } from 'firebase/app';
import { getAuth, onAuthStateChanged, signOut, EmailAuthProvider, GoogleAuthProvider } from 'firebase/auth';

// Configure Firebase.
const config = {
apiKey: 'AIzaSyAeue-AsYu76MMQlTOM-KlbYBlusW9c1FM',
authDomain: 'myproject-1234.firebaseapp.com',
// ...
};
firebase.initializeApp(config);
const firebaseApp = initializeApp(firebaseConfig);

// Configure FirebaseUI.
const uiConfig = {
// Popup signin flow rather than redirect flow.
signInFlow: 'popup',
// We will display Google and Facebook as auth providers.
signInOptions: [
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
firebase.auth.FacebookAuthProvider.PROVIDER_ID
GoogleAuthProvider.PROVIDER_ID,
FacebookAuthProvider.PROVIDER_ID
],
callbacks: {
// Avoid redirects after sign-in.
Expand All @@ -118,11 +122,12 @@ const uiConfig = {
};

function SignInScreen() {
const auth = getAuth(firebaseApp);
const [isSignedIn, setIsSignedIn] = useState(false); // Local signed-in state.

// Listen to the Firebase Auth state and set the local state.
useEffect(() => {
const unregisterAuthObserver = firebase.auth().onAuthStateChanged(user => {
const unregisterAuthObserver = onAuthStateChanged(auth, user => {
setIsSignedIn(!!user);
});
return () => unregisterAuthObserver(); // Make sure we un-register Firebase observers when the component unmounts.
Expand All @@ -133,15 +138,15 @@ function SignInScreen() {
<div>
<h1>My App</h1>
<p>Please sign-in:</p>
<StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()} />
<StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={auth} />
</div>
);
}
return (
<div>
<h1>My App</h1>
<p>Welcome {firebase.auth().currentUser.displayName}! You are now signed-in!</p>
<a onClick={() => firebase.auth().signOut()}>Sign-out</a>
<p>Welcome {auth.currentUser.displayName}! You are now signed-in!</p>
<a onClick={() => signOut(auth)}>Sign-out</a>
</div>
);
}
Expand All @@ -161,7 +166,7 @@ return (
<div>
<h1>My App</h1>
<p>Please sign-in:</p>
<StyledFirebaseAuth uiCallback={ui => ui.disableAutoSignIn()} uiConfig={uiConfig} firebaseAuth={firebase.auth()}/>
<StyledFirebaseAuth uiCallback={ui => ui.disableAutoSignIn()} uiConfig={uiConfig} firebaseAuth={auth}/>
</div>
);
```
Expand Down
Loading