|
1 | | -# firebaseui-web-react |
2 | | -React Wrapper for firebaseUI Web |
| 1 | +# FirebaseUI Web -- Auth for React |
| 2 | + |
| 3 | +FirebaseUI for react provides a React Wrapper on top of the [Firebase UI Web library](https://github.com/firebase/firebaseui-web/) and notably Firebase UI Auth. |
| 4 | + |
| 5 | +FirebaseUI Auth provides a drop-in auth solution that handles the UI flows for signing in users with email addresses and passwords, and Identity Provider Sign In using Google, Facebook and others. It is built on top of Firebase Auth. |
| 6 | + |
| 7 | + |
| 8 | +## Installation and Usage |
| 9 | + |
| 10 | +> For an example on how to use the FirebaseAuth react component have a look at the [example](./example) folder. |
| 11 | +
|
| 12 | +Install the npm package in your React app: |
| 13 | + |
| 14 | +```bash |
| 15 | +npm install --save react-firebaseui |
| 16 | +``` |
| 17 | + |
| 18 | +You also need the `firebase` package installed which is a peer dependency: |
| 19 | + |
| 20 | +```bash |
| 21 | +npm install --save firebase |
| 22 | +``` |
| 23 | + |
| 24 | +In your app: |
| 25 | + 1. Import the `FirebaseAuth` component from `react-firebaseui` and import `firebase`. |
| 26 | + 2. Configure Firebase as described in [the Firebase Docs](https://firebase.google.com/docs/web/setup). |
| 27 | + 3. Configure Firebase UI as described in [firebase/firebaseui-web](https://github.com/firebase/firebaseui-web#configuration). |
| 28 | + 4. Use the `FirebaseAuth` component in your template passing it the configuration and a Firebase Auth instance. |
| 29 | + |
| 30 | + |
| 31 | +### Using `FirebaseAuth` with a redirect |
| 32 | + |
| 33 | +Below is an example on how to use `FirebaseAuth` with a redirect upon sign-in: |
| 34 | + |
| 35 | +```js |
| 36 | +// Import FirebaseAuth and firebase. |
| 37 | +import React from 'react'; |
| 38 | +import { FirebaseAuth } from 'react-firebaseui'; |
| 39 | +import firebase from 'firebase'; |
| 40 | + |
| 41 | +// Configure Firebase. |
| 42 | +const config = { |
| 43 | + apiKey: 'AIzaSyAeue-AsYu76MMQlTOM-KlbYBlusW9c1FM', |
| 44 | + authDomain: 'myproject-1234.firebaseapp.com', |
| 45 | + // ... |
| 46 | +}; |
| 47 | +firebase.initializeApp(config); |
| 48 | + |
| 49 | +// Configure FirebaseUI. |
| 50 | +const uiConfig = { |
| 51 | + // Popup signin flow rather than redirect flow. |
| 52 | + signInFlow: 'popup', |
| 53 | + // Redirect to /signedIn after sign in is successful. Alternatively you can use provide a callbacks.signInSuccess function. |
| 54 | + signInSuccessUrl: '/signedIn', |
| 55 | + // We will display Google and Facebook as auth providers. |
| 56 | + signInOptions: [ |
| 57 | + firebase.auth.GoogleAuthProvider.PROVIDER_ID, |
| 58 | + firebase.auth.FacebookAuthProvider.PROVIDER_ID |
| 59 | + ] |
| 60 | +}; |
| 61 | + |
| 62 | +class SignInScreen extends React.Component { |
| 63 | + render() { |
| 64 | + return ( |
| 65 | + <h1>My App</h1> |
| 66 | + <p>Please sign-in:</p> |
| 67 | + <FirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()}/> |
| 68 | + ); |
| 69 | + } |
| 70 | +} |
| 71 | +``` |
| 72 | + |
| 73 | +### Using `FirebaseAuth` with local state. |
| 74 | + |
| 75 | +Below is an example on how to use `FirebaseAuth` with a state change upon sign-in: |
| 76 | + |
| 77 | +```js |
| 78 | +// Import FirebaseAuth and firebase. |
| 79 | +import React from 'react'; |
| 80 | +import { FirebaseAuth } from 'react-firebaseui'; |
| 81 | +import firebase from 'firebase'; |
| 82 | + |
| 83 | +// Configure Firebase. |
| 84 | +const config = { |
| 85 | + apiKey: 'AIzaSyAeue-AsYu76MMQlTOM-KlbYBlusW9c1FM', |
| 86 | + authDomain: 'myproject-1234.firebaseapp.com', |
| 87 | + // ... |
| 88 | +}; |
| 89 | +firebase.initializeApp(config); |
| 90 | + |
| 91 | +class SignInScreen extends React.Component { |
| 92 | + |
| 93 | + // Configure FirebaseUI. |
| 94 | + uiConfig = { |
| 95 | + // Popup signin flow rather than redirect flow. |
| 96 | + signInFlow: 'popup', |
| 97 | + // Redirect to /signedIn after sign in is successful. Alternatively you can use provide a callbacks.signInSuccess function. |
| 98 | + signInSuccessUrl: '/signedIn', |
| 99 | + // We will display Google and Facebook as auth providers. |
| 100 | + signInOptions: [ |
| 101 | + firebase.auth.GoogleAuthProvider.PROVIDER_ID, |
| 102 | + firebase.auth.FacebookAuthProvider.PROVIDER_ID |
| 103 | + ], |
| 104 | + callbacks: { |
| 105 | + signInSuccess: () => { |
| 106 | + this.setState({signedIn: true}); |
| 107 | + return false; |
| 108 | + } |
| 109 | + } |
| 110 | + }; |
| 111 | + |
| 112 | + state = { |
| 113 | + signedIn: false |
| 114 | + }; |
| 115 | + |
| 116 | + render() { |
| 117 | + if (!this.state.signedIn) { |
| 118 | + return ( |
| 119 | + <h1>My App</h1> |
| 120 | + <p>Please sign-in:</p> |
| 121 | + <FirebaseAuth uiConfig={this.uiConfig} firebaseAuth={firebase.auth()}/> |
| 122 | + ); |
| 123 | + } |
| 124 | + return ( |
| 125 | + <h1>My App</h1> |
| 126 | + <p>Welcome! You are now signed-in!</p> |
| 127 | + ); |
| 128 | + } |
| 129 | +} |
| 130 | +``` |
| 131 | + |
| 132 | +## Packing your app |
| 133 | + |
| 134 | +The `FirebaseAuth` component needs a global CSS to get proper styling. The CSS is already import within `FirebaseAuth`. |
| 135 | +If you are using webpack you'll need to add [CSS loaders](https://github.com/webpack-contrib/css-loader): |
| 136 | + |
| 137 | +```json |
| 138 | +{ |
| 139 | + module: { |
| 140 | + rules: [ |
| 141 | + { |
| 142 | + test: /\.css/, |
| 143 | + use: [ 'style-loader', 'css-loader' ] |
| 144 | + } |
| 145 | + ] |
| 146 | + } |
| 147 | +} |
| 148 | +``` |
| 149 | + |
| 150 | +### With ExtractTextPlugin |
| 151 | + |
| 152 | +If you are using [`ExtractTextPlugin`](https://github.com/webpack-contrib/extract-text-webpack-plugin) to extract a CSS file from the required CSS files you would typically use: |
| 153 | + |
| 154 | +```json |
| 155 | +{ |
| 156 | + plugins: [new ExtractTextPlugin('./bundle.css')], |
| 157 | + module: { |
| 158 | + rules: [ |
| 159 | + { |
| 160 | + test: /\.css/, |
| 161 | + loader: ExtractTextPlugin.extract( |
| 162 | + { |
| 163 | + fallback: 'style-loader', |
| 164 | + use: ['css-loader'] |
| 165 | + }) |
| 166 | + } |
| 167 | + ] |
| 168 | + } |
| 169 | +} |
| 170 | +``` |
| 171 | + |
| 172 | +### With ExtractTextPlugin and CSS modules |
| 173 | + |
| 174 | +If you are using CSS modules in your app you need to handle the CSS files in `/node_modules/` in a separate loader so that they are imported as global CSS files and not modules. Your setup could look like: |
| 175 | + |
| 176 | +```json |
| 177 | +{ |
| 178 | + plugins: [new ExtractTextPlugin('./bundle.css')], |
| 179 | + module: { |
| 180 | + rules: [ |
| 181 | + { |
| 182 | + test: /\.css$/, |
| 183 | + exclude: [/\.global\./, /node_modules/], |
| 184 | + loader: ExtractTextPlugin.extract( |
| 185 | + { |
| 186 | + fallback: 'style-loader', |
| 187 | + use:[ |
| 188 | + { |
| 189 | + loader: 'css-loader', |
| 190 | + options: { |
| 191 | + importLoaders: 1, |
| 192 | + modules: true, |
| 193 | + autoprefixer: true, |
| 194 | + minimize: true, |
| 195 | + localIdentName: '[name]__[local]___[hash:base64:5]' |
| 196 | + } |
| 197 | + } |
| 198 | + ] |
| 199 | + }) |
| 200 | + }, |
| 201 | + { |
| 202 | + test: /\.css/, |
| 203 | + include: [/\.global\./, /node_modules/], |
| 204 | + loader: ExtractTextPlugin.extract( |
| 205 | + { |
| 206 | + fallback: 'style-loader', |
| 207 | + use: ['css-loader'] |
| 208 | + }) |
| 209 | + } |
| 210 | + ] |
| 211 | + } |
| 212 | +} |
| 213 | +``` |
| 214 | + |
| 215 | +## Styling |
| 216 | + |
| 217 | +To change the styling of the `FirebaseAuth` widget you can override its CSS. You can import a CSS that will be included globally in your packed application. For instance create a `firebaseui-overrides.globlal.css` file and import it in your app: |
| 218 | + |
| 219 | +```js |
| 220 | +import './firebaseui-styling.global.css'; // Import globally. |
| 221 | +``` |
| 222 | + |
| 223 | +> Note: If you are using the "With ExtractTextPlugin and CSS modules" Webpack build rule above, the `.global.css` suffixe will make sure the CSS file is imported globally and not ran through modules support. |
| 224 | +
|
| 225 | +If you would like to see an example of styling, have a look at the [example app](./example). |
| 226 | + |
| 227 | + |
| 228 | +## Using multiple instances |
| 229 | + |
| 230 | +In the rare case where you would need to load multiple instances of `FirebaseAuth` at the same time you need to pass them a different ID using the `elementId` attribute. For instance: |
| 231 | + |
| 232 | +```js |
| 233 | +<FirebaseAuth elementId="auth_1" uiConfig={this.uiConfig} firebaseAuth={firebase.auth()}/> |
| 234 | +<FirebaseAuth elementId="auth_2" uiConfig={this.uiConfig} firebaseAuth={firebase.auth()}/> |
| 235 | + |
| 236 | +``` |
| 237 | + |
| 238 | + |
| 239 | +## Contributing |
| 240 | + |
| 241 | +We'd love that you contribute to the project. Before doing so please read our [Contributor guide](CONTRIBUTING.md). |
| 242 | + |
| 243 | + |
| 244 | +## License |
| 245 | + |
| 246 | +© Google, 2011. Licensed under an [Apache-2](LICENSE) license. |
0 commit comments