You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
FirebaseUI React Components provides React Wrappers on top of the [Firebase UI Web library](https://github.com/firebase/firebaseui-web/) and notably Firebase UI Auth.
@@ -33,8 +36,8 @@ In your app:
33
36
There are two similar components that allow you to add FirebaseUI auth to your application: `FirebaseAuth` and `StyledFirebaseAuth`.
34
37
-`FirebaseAuth` has a reference to the FirebaseUI CSS file (it `requires` the CSS).
35
38
-`StyledFirebaseAuth` is bundled with the CSS directly.
36
-
37
-
For simplicity you should use `StyledFirebaseAuth` and for potential better performances and build sizes you can use `FirebaseAuth`. `FirebaseAuth` is meant to be used with a CSS/style loader as part of yor webpack built configuration. See the [Packing your app](#packing-your-app) section.
39
+
40
+
For simplicity you should use `StyledFirebaseAuth` and for potential better performances and build sizes you can use `FirebaseAuth`. `FirebaseAuth` is meant to be used with a CSS/style loader as part of your webpack built configuration. See the [Packing your app](#packing-your-app) section.
38
41
39
42
40
43
### Using `StyledFirebaseAuth` with a redirect
@@ -100,12 +103,12 @@ const config = {
100
103
firebase.initializeApp(config);
101
104
102
105
classSignInScreenextendsReact.Component {
103
-
106
+
104
107
// The component's Local state.
105
108
state = {
106
109
signedIn:false// Local signed-in state.
107
110
};
108
-
111
+
109
112
// Configure FirebaseUI.
110
113
uiConfig = {
111
114
// Popup signin flow rather than redirect flow.
@@ -122,12 +125,12 @@ class SignInScreen extends React.Component {
122
125
};
123
126
124
127
// Listen to the Firebase Auth state and set the local state.
125
-
componentWillMount() {
128
+
componentDidMount() {
126
129
firebase.auth().onAuthStateChanged(
127
130
(user) =>this.setState({signedIn:!!user})
128
131
);
129
132
}
130
-
133
+
131
134
render() {
132
135
if (!this.state.signedIn) {
133
136
return (
@@ -261,8 +264,8 @@ If you are using CSS modules in your app you need to handle the CSS files in `/n
261
264
}
262
265
```
263
266
264
-
## Styling
265
-
267
+
## Styling
268
+
266
269
To change the styling of the `FirebaseAuth` or the `StyledFirebaseAuth` widget you can override some of its CSS. To do this, import a CSS that will be included in your packed application. For instance create a `firebaseui-styling.global.css` file and import it in your app:
267
270
268
271
```js
@@ -278,9 +281,9 @@ Alternatively you can include the styling in a `<style>` tag in your application
278
281
279
282
## Server-Side Rendering (SSR)
280
283
281
-
FirebaseUI React cannot be rendered on the serverside becasue the underlying, wrapped library ([FirebaseUI](https://npmjs.com/package/firebaseui) does not work server-side.
284
+
FirebaseUI React cannot be rendered server-side because the underlying, wrapped library ([FirebaseUI](https://npmjs.com/package/firebaseui)) does not work server-side.
282
285
283
-
You may still import and include the library in an app that uses SSR: there should be no errors but no elements will be rendered.
286
+
You can still import and include this library in an app that uses SSR: there should be no errors but no elements will be rendered.
0 commit comments