Skip to content

Commit

Permalink
Merge pull request #1 from shiiinji/feature_firebase9_firebaseui0.600
Browse files Browse the repository at this point in the history 
Update dependencies: 🔥 Firebase 9 and Firebaseui 0.600
  • Loading branch information
@shiiinji
shiiinji authored Sep 3, 2021
2 parents e2acfdd + 851cdab commit f1b8abf
Show file tree
Hide file tree
Showing 8 changed files with 31,886 additions and 1,762 deletions.
33 changes: 19 additions & 14 deletions README.md
View file
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
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

0 comments on commit f1b8abf

Please sign in to comment.