Skip to content

Commit 237f136

Browse files
shiiinjishiiinji
committed
fix: using compat import way
1 parent 888973f commit 237f136

File tree

3 files changed

+36
-49
lines changed

3 files changed

+36
-49
lines changed

‎README.md

Lines changed: 14 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -48,16 +48,15 @@ Below is an example on how to use `FirebaseAuth` with a redirect upon sign-in:
4848
// Import FirebaseAuth and firebase.
4949
import React from 'react';
5050
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
51-
import { initializeApp } from 'firebase/app';
52-
import { getAuth, FacebookAuthProvider, GoogleAuthProvider } from 'firebase/auth';
51+
import firebase from 'firebase/compat/app';
5352

5453
// Configure Firebase.
5554
const config = {
5655
apiKey: 'AIzaSyAeue-AsYu76MMQlTOM-KlbYBlusW9c1FM',
5756
authDomain: 'myproject-1234.firebaseapp.com',
5857
// ...
5958
};
60-
const firebaseApp = initializeApp(config);
59+
firebase.initializeApp(config);
6160

6261
// Configure FirebaseUI.
6362
const uiConfig = {
@@ -67,19 +66,17 @@ const uiConfig = {
6766
signInSuccessUrl: '/signedIn',
6867
// We will display Google and Facebook as auth providers.
6968
signInOptions: [
70-
GoogleAuthProvider.PROVIDER_ID,
71-
FacebookAuthProvider.PROVIDER_ID,
69+
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
70+
firebase.auth.FacebookAuthProvider.PROVIDER_ID,
7271
],
7372
};
7473

7574
function SignInScreen() {
76-
const auth = getAuth(firebaseApp)
77-
7875
return (
7976
<div>
8077
<h1>My App</h1>
8178
<p>Please sign-in:</p>
82-
<StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={auth} />
79+
<StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()} />
8380
</div>
8481
);
8582
}
@@ -95,25 +92,24 @@ Below is an example on how to use `StyledFirebaseAuth` with a state change upon
9592
// Import FirebaseAuth and firebase.
9693
import React, { useEffect, useState } from 'react';
9794
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
98-
import { initializeApp } from 'firebase/app';
99-
import { getAuth, onAuthStateChanged, signOut, FacebookAuthProvider, GoogleAuthProvider } from 'firebase/auth';
95+
import firebase from 'firebase/compat/app';
10096

10197
// Configure Firebase.
10298
const config = {
10399
apiKey: 'AIzaSyAeue-AsYu76MMQlTOM-KlbYBlusW9c1FM',
104100
authDomain: 'myproject-1234.firebaseapp.com',
105101
// ...
106102
};
107-
const firebaseApp = initializeApp(config);
103+
firebase.initializeApp(config);
108104

109105
// Configure FirebaseUI.
110106
const uiConfig = {
111107
// Popup signin flow rather than redirect flow.
112108
signInFlow: 'popup',
113109
// We will display Google and Facebook as auth providers.
114110
signInOptions: [
115-
GoogleAuthProvider.PROVIDER_ID,
116-
FacebookAuthProvider.PROVIDER_ID
111+
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
112+
firebase.auth.FacebookAuthProvider.PROVIDER_ID
117113
],
118114
callbacks: {
119115
// Avoid redirects after sign-in.
@@ -122,12 +118,11 @@ const uiConfig = {
122118
};
123119

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

128123
// Listen to the Firebase Auth state and set the local state.
129124
useEffect(() => {
130-
const unregisterAuthObserver = onAuthStateChanged(auth, user => {
125+
const unregisterAuthObserver = firebase.auth().onAuthStateChanged(user => {
131126
setIsSignedIn(!!user);
132127
});
133128
return () => unregisterAuthObserver(); // Make sure we un-register Firebase observers when the component unmounts.
@@ -138,15 +133,15 @@ function SignInScreen() {
138133
<div>
139134
<h1>My App</h1>
140135
<p>Please sign-in:</p>
141-
<StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={auth} />
136+
<StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()} />
142137
</div>
143138
);
144139
}
145140
return (
146141
<div>
147142
<h1>My App</h1>
148-
<p>Welcome {auth.currentUser.displayName}! You are now signed-in!</p>
149-
<a onClick={() => signOut(auth)}>Sign-out</a>
143+
<p>Welcome {firebase.auth().currentUser.displayName}! You are now signed-in!</p>
144+
<a onClick={() => firebase.auth().signOut()}>Sign-out</a>
150145
</div>
151146
);
152147
}
@@ -166,7 +161,7 @@ return (
166161
<div>
167162
<h1>My App</h1>
168163
<p>Please sign-in:</p>
169-
<StyledFirebaseAuth uiCallback={ui => ui.disableAutoSignIn()} uiConfig={uiConfig} firebaseAuth={auth}/>
164+
<StyledFirebaseAuth uiCallback={ui => ui.disableAutoSignIn()} uiConfig={uiConfig} firebaseAuth={firebase.auth()}/>
170165
</div>
171166
);
172167
```

‎dist/README.md

Lines changed: 14 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -48,16 +48,15 @@ Below is an example on how to use `FirebaseAuth` with a redirect upon sign-in:
4848
// Import FirebaseAuth and firebase.
4949
import React from 'react';
5050
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
51-
import { initializeApp } from 'firebase/app';
52-
import { getAuth, FacebookAuthProvider, GoogleAuthProvider } from 'firebase/auth';
51+
import firebase from 'firebase/compat/app';
5352

5453
// Configure Firebase.
5554
const config = {
5655
apiKey: 'AIzaSyAeue-AsYu76MMQlTOM-KlbYBlusW9c1FM',
5756
authDomain: 'myproject-1234.firebaseapp.com',
5857
// ...
5958
};
60-
const firebaseApp = initializeApp(config);
59+
firebase.initializeApp(config);
6160

6261
// Configure FirebaseUI.
6362
const uiConfig = {
@@ -67,19 +66,17 @@ const uiConfig = {
6766
signInSuccessUrl: '/signedIn',
6867
// We will display Google and Facebook as auth providers.
6968
signInOptions: [
70-
GoogleAuthProvider.PROVIDER_ID,
71-
FacebookAuthProvider.PROVIDER_ID,
69+
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
70+
firebase.auth.FacebookAuthProvider.PROVIDER_ID,
7271
],
7372
};
7473

7574
function SignInScreen() {
76-
const auth = getAuth(firebaseApp)
77-
7875
return (
7976
<div>
8077
<h1>My App</h1>
8178
<p>Please sign-in:</p>
82-
<StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={auth} />
79+
<StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()} />
8380
</div>
8481
);
8582
}
@@ -95,25 +92,24 @@ Below is an example on how to use `StyledFirebaseAuth` with a state change upon
9592
// Import FirebaseAuth and firebase.
9693
import React, { useEffect, useState } from 'react';
9794
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
98-
import { initializeApp } from 'firebase/app';
99-
import { getAuth, onAuthStateChanged, signOut, FacebookAuthProvider, GoogleAuthProvider } from 'firebase/auth';
95+
import firebase from 'firebase/compat/app';
10096

10197
// Configure Firebase.
10298
const config = {
10399
apiKey: 'AIzaSyAeue-AsYu76MMQlTOM-KlbYBlusW9c1FM',
104100
authDomain: 'myproject-1234.firebaseapp.com',
105101
// ...
106102
};
107-
const firebaseApp = initializeApp(config);
103+
firebase.initializeApp(config);
108104

109105
// Configure FirebaseUI.
110106
const uiConfig = {
111107
// Popup signin flow rather than redirect flow.
112108
signInFlow: 'popup',
113109
// We will display Google and Facebook as auth providers.
114110
signInOptions: [
115-
GoogleAuthProvider.PROVIDER_ID,
116-
FacebookAuthProvider.PROVIDER_ID
111+
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
112+
firebase.auth.FacebookAuthProvider.PROVIDER_ID
117113
],
118114
callbacks: {
119115
// Avoid redirects after sign-in.
@@ -122,12 +118,11 @@ const uiConfig = {
122118
};
123119

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

128123
// Listen to the Firebase Auth state and set the local state.
129124
useEffect(() => {
130-
const unregisterAuthObserver = onAuthStateChanged(auth, user => {
125+
const unregisterAuthObserver = firebase.auth().onAuthStateChanged(user => {
131126
setIsSignedIn(!!user);
132127
});
133128
return () => unregisterAuthObserver(); // Make sure we un-register Firebase observers when the component unmounts.
@@ -138,15 +133,15 @@ function SignInScreen() {
138133
<div>
139134
<h1>My App</h1>
140135
<p>Please sign-in:</p>
141-
<StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={auth} />
136+
<StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()} />
142137
</div>
143138
);
144139
}
145140
return (
146141
<div>
147142
<h1>My App</h1>
148-
<p>Welcome {auth.currentUser.displayName}! You are now signed-in!</p>
149-
<a onClick={() => signOut(auth)}>Sign-out</a>
143+
<p>Welcome {firebase.auth().currentUser.displayName}! You are now signed-in!</p>
144+
<a onClick={() => firebase.auth().signOut()}>Sign-out</a>
150145
</div>
151146
);
152147
}
@@ -166,7 +161,7 @@ return (
166161
<div>
167162
<h1>My App</h1>
168163
<p>Please sign-in:</p>
169-
<StyledFirebaseAuth uiCallback={ui => ui.disableAutoSignIn()} uiConfig={uiConfig} firebaseAuth={auth}/>
164+
<StyledFirebaseAuth uiCallback={ui => ui.disableAutoSignIn()} uiConfig={uiConfig} firebaseAuth={firebase.auth()}/>
170165
</div>
171166
);
172167
```

‎example/src/App.jsx

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,7 @@ import React from 'react';
1919
import ReactDOM from 'react-dom';
2020

2121
// Firebase.
22-
import { initializeApp } from 'firebase/app';
23-
import { getAuth, onAuthStateChanged, signOut, EmailAuthProvider, GoogleAuthProvider } from 'firebase/auth';
22+
import firebase from 'firebase/compat/app';
2423
import StyledFirebaseAuth from '../../dist/StyledFirebaseAuth';
2524

2625
// Styles
@@ -31,19 +30,17 @@ import './firebaseui-styling.global.css'; // Import globally.
3130
const firebaseConfig = require('./firebase-config.json').result.sdkConfig;
3231

3332
// Instantiate a Firebase app.
34-
const firebaseApp = initializeApp(firebaseConfig);
33+
const firebaseApp = firebase.initializeApp(firebaseConfig);
3534

3635
/**
3736
* The Splash Page containing the login UI.
3837
*/
3938
class App extends React.Component {
40-
auth = getAuth(firebaseApp)
41-
4239
uiConfig = {
4340
signInFlow: 'popup',
4441
signInOptions: [
45-
GoogleAuthProvider.PROVIDER_ID,
46-
EmailAuthProvider.PROVIDER_ID,
42+
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
43+
firebase.auth.EmailAuthProvider.PROVIDER_ID,
4744
],
4845
callbacks: {
4946
signInSuccessWithAuthResult: () => false,
@@ -58,7 +55,7 @@ class App extends React.Component {
5855
* @inheritDoc
5956
*/
6057
componentDidMount() {
61-
this.unregisterAuthObserver = onAuthStateChanged(this.auth, (user) => {
58+
this.unregisterAuthObserver = firebaseApp.auth().onAuthStateChanged((user) => {
6259
this.setState({isSignedIn: !!user});
6360
});
6461
}
@@ -83,13 +80,13 @@ class App extends React.Component {
8380
{this.state.isSignedIn !== undefined && !this.state.isSignedIn &&
8481
<div>
8582
<StyledFirebaseAuth className={styles.firebaseUi} uiConfig={this.uiConfig}
86-
firebaseAuth={this.auth}/>
83+
firebaseAuth={firebaseApp.auth()}/>
8784
</div>
8885
}
8986
{this.state.isSignedIn &&
9087
<div className={styles.signedIn}>
91-
Hello {this.auth.currentUser.displayName}. You are now signed In!
92-
<a className={styles.button} onClick={() => signOut(this.auth)}>Sign-out</a>
88+
Hello {firebaseApp.auth().currentUser.displayName}. You are now signed In!
89+
<a className={styles.button} onClick={() => firebaseApp.auth().signOut()}>Sign-out</a>
9390
</div>
9491
}
9592
</div>

0 commit comments

Comments
 (0)