diff --git a/dist/FirebaseAuth.js b/dist/FirebaseAuth.js index b9493e38..919f4a4e 100644 --- a/dist/FirebaseAuth.js +++ b/dist/FirebaseAuth.js @@ -27,6 +27,7 @@ var FirebaseAuth = function (_React$Component) { _this.uiConfig = props.uiConfig; _this.firebaseAuth = props.firebaseAuth; _this.className = props.className; + _this.uiCallback = props.uiCallback; return _this; } diff --git a/dist/FirebaseAuth.js.map b/dist/FirebaseAuth.js.map index 51d66d89..d5623c21 100644 --- a/dist/FirebaseAuth.js.map +++ b/dist/FirebaseAuth.js.map @@ -1 +1 @@ -{"version":3,"sources":["../src/FirebaseAuth.jsx"],"names":["ELEMENT_ID","FirebaseAuth","props","uiConfig","firebaseAuth","className","componentDidMount","require","firebaseui","firebaseUiWidget","auth","AuthUI","getInstance","signInFlow","reset","uiCallback","start","componentWillUnmount","render","Component"],"mappings":";;;;AAiBA;;;;;;;;;;;;AAGA,IAAMA,aAAa,sBAAnB;;IAKqBC,Y;;;AAOnB,wBAAYC,KAAZ,EAAmB;AAAA;;AAAA,iDACjB,4BAAMA,KAAN,CADiB;;AAGjB,UAAKC,QAAL,GAAgBD,MAAMC,QAAtB;AACA,UAAKC,YAAL,GAAoBF,MAAME,YAA1B;AACA,UAAKC,SAAL,GAAiBH,MAAMG,SAAvB;AALiB;AAMlB;;yBAKDC,iB,gCAAoB;AAElBC,YAAQ,gCAAR;;AAGA,QAAMC,aAAaD,QAAQ,YAAR,CAAnB;AACA,SAAKE,gBAAL,GAAwBD,WAAWE,IAAX,CAAgBC,MAAhB,CAAuBC,WAAvB,MACC,IAAIJ,WAAWE,IAAX,CAAgBC,MAApB,CAA2B,KAAKP,YAAhC,CADzB;AAEA,QAAI,KAAKD,QAAL,CAAcU,UAAd,KAA6B,OAAjC,EAA0C;AACxC,WAAKJ,gBAAL,CAAsBK,KAAtB;AACD;AACD,QAAI,KAAKC,UAAT,EAAqB;AACnB,WAAKA,UAAL,CAAgB,KAAKN,gBAArB;AACD;AACD,SAAKA,gBAAL,CAAsBO,KAAtB,CAA4B,MAAMhB,UAAlC,EAA8C,KAAKG,QAAnD;AACD,G;;yBAKDc,oB,mCAAuB;AACrB,SAAKR,gBAAL,CAAsBK,KAAtB;AACD,G;;yBAqBDI,M,qBAAS;AACP,WACE,uCAAK,WAAW,KAAKb,SAArB,EAAgC,IAAIL,UAApC,GADF;AAGD,G;;;EAjEuC,gBAAMmB,S;;kBAA3BlB,Y","file":"FirebaseAuth.js","sourcesContent":["/**\n * Copyright 2017 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n// @flow\n\nimport React from 'react';\n\n// Global ID for the element.\nconst ELEMENT_ID = 'firebaseui_container';\n\n/**\n * React Component wrapper for the FirebaseUI Auth widget.\n */\nexport default class FirebaseAuth extends React.Component {\n /**\n * Constructor Firebase Auth UI component\n *\n * @param {Object} props - Additional object properties.\n * @constructor\n */\n constructor(props) {\n super(props);\n\n this.uiConfig = props.uiConfig;\n this.firebaseAuth = props.firebaseAuth;\n this.className = props.className;\n }\n\n /**\n * @inheritDoc\n */\n componentDidMount() {\n // Import the css only on the client.\n require('firebaseui/dist/firebaseui.css');\n\n // Firebase UI only works on the Client. So we're loading in `componentDidMount`.\n const firebaseui = require('firebaseui');\n this.firebaseUiWidget = firebaseui.auth.AuthUI.getInstance()\n || new firebaseui.auth.AuthUI(this.firebaseAuth);\n if (this.uiConfig.signInFlow === 'popup') {\n this.firebaseUiWidget.reset();\n }\n if (this.uiCallback) {\n this.uiCallback(this.firebaseUiWidget);\n }\n this.firebaseUiWidget.start('#' + ELEMENT_ID, this.uiConfig);\n }\n\n /**\n * @inheritDoc\n */\n componentWillUnmount() {\n this.firebaseUiWidget.reset();\n }\n\n /**\n * Properties types.\n */\n props: {\n // The Firebase UI Web UI Config object.\n // See: https://github.com/firebase/firebaseui-web#configuration\n uiConfig: Object,\n // The Firebase App auth instance to use.\n firebaseAuth: Object,\n // Callback that will be passed the FirebaseUi instance before it is\n // started. This allows access to certain configuration options such as\n // disableAutoSignIn().\n uiCallback?: Function,\n className: String\n };\n\n /**\n * @inheritDoc\n */\n render() {\n return (\n
\n );\n }\n}\n"]} \ No newline at end of file +{"version":3,"sources":["../src/FirebaseAuth.jsx"],"names":["ELEMENT_ID","FirebaseAuth","props","uiConfig","firebaseAuth","className","uiCallback","componentDidMount","require","firebaseui","firebaseUiWidget","auth","AuthUI","getInstance","signInFlow","reset","start","componentWillUnmount","render","Component"],"mappings":";;;;AAiBA;;;;;;;;;;;;AAGA,IAAMA,aAAa,sBAAnB;;IAKqBC,Y;;;AAOnB,wBAAYC,KAAZ,EAAmB;AAAA;;AAAA,iDACjB,4BAAMA,KAAN,CADiB;;AAGjB,UAAKC,QAAL,GAAgBD,MAAMC,QAAtB;AACA,UAAKC,YAAL,GAAoBF,MAAME,YAA1B;AACA,UAAKC,SAAL,GAAiBH,MAAMG,SAAvB;AACA,UAAKC,UAAL,GAAkBJ,MAAMI,UAAxB;AANiB;AAOlB;;yBAKDC,iB,gCAAoB;AAElBC,YAAQ,gCAAR;;AAGA,QAAMC,aAAaD,QAAQ,YAAR,CAAnB;AACA,SAAKE,gBAAL,GAAwBD,WAAWE,IAAX,CAAgBC,MAAhB,CAAuBC,WAAvB,MACC,IAAIJ,WAAWE,IAAX,CAAgBC,MAApB,CAA2B,KAAKR,YAAhC,CADzB;AAEA,QAAI,KAAKD,QAAL,CAAcW,UAAd,KAA6B,OAAjC,EAA0C;AACxC,WAAKJ,gBAAL,CAAsBK,KAAtB;AACD;AACD,QAAI,KAAKT,UAAT,EAAqB;AACnB,WAAKA,UAAL,CAAgB,KAAKI,gBAArB;AACD;AACD,SAAKA,gBAAL,CAAsBM,KAAtB,CAA4B,MAAMhB,UAAlC,EAA8C,KAAKG,QAAnD;AACD,G;;yBAKDc,oB,mCAAuB;AACrB,SAAKP,gBAAL,CAAsBK,KAAtB;AACD,G;;yBAqBDG,M,qBAAS;AACP,WACE,uCAAK,WAAW,KAAKb,SAArB,EAAgC,IAAIL,UAApC,GADF;AAGD,G;;;EAlEuC,gBAAMmB,S;;kBAA3BlB,Y","file":"FirebaseAuth.js","sourcesContent":["/**\n * Copyright 2017 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n// @flow\n\nimport React from 'react';\n\n// Global ID for the element.\nconst ELEMENT_ID = 'firebaseui_container';\n\n/**\n * React Component wrapper for the FirebaseUI Auth widget.\n */\nexport default class FirebaseAuth extends React.Component {\n /**\n * Constructor Firebase Auth UI component\n *\n * @param {Object} props - Additional object properties.\n * @constructor\n */\n constructor(props) {\n super(props);\n\n this.uiConfig = props.uiConfig;\n this.firebaseAuth = props.firebaseAuth;\n this.className = props.className;\n this.uiCallback = props.uiCallback;\n }\n\n /**\n * @inheritDoc\n */\n componentDidMount() {\n // Import the css only on the client.\n require('firebaseui/dist/firebaseui.css');\n\n // Firebase UI only works on the Client. So we're loading in `componentDidMount`.\n const firebaseui = require('firebaseui');\n this.firebaseUiWidget = firebaseui.auth.AuthUI.getInstance()\n || new firebaseui.auth.AuthUI(this.firebaseAuth);\n if (this.uiConfig.signInFlow === 'popup') {\n this.firebaseUiWidget.reset();\n }\n if (this.uiCallback) {\n this.uiCallback(this.firebaseUiWidget);\n }\n this.firebaseUiWidget.start('#' + ELEMENT_ID, this.uiConfig);\n }\n\n /**\n * @inheritDoc\n */\n componentWillUnmount() {\n this.firebaseUiWidget.reset();\n }\n\n /**\n * Properties types.\n */\n props: {\n // The Firebase UI Web UI Config object.\n // See: https://github.com/firebase/firebaseui-web#configuration\n uiConfig: Object,\n // The Firebase App auth instance to use.\n firebaseAuth: Object,\n // Callback that will be passed the FirebaseUi instance before it is\n // started. This allows access to certain configuration options such as\n // disableAutoSignIn().\n uiCallback?: Function,\n className: String\n };\n\n /**\n * @inheritDoc\n */\n render() {\n return (\n
\n );\n }\n}\n"]} \ No newline at end of file diff --git a/dist/README.md b/dist/README.md index 4383848b..61bd70f7 100644 --- a/dist/README.md +++ b/dist/README.md @@ -1,3 +1,6 @@ +[![npm version](https://badge.fury.io/js/react-firebaseui.svg)](https://badge.fury.io/js/react-firebaseui) +[![GitHub license](https://img.shields.io/github/license/firebase/firebaseui-web-react.svg)](https://github.com/Firebase/firebaseui-web-react/blob/master/LICENSE) + # FirebaseUI React Components 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: There are two similar components that allow you to add FirebaseUI auth to your application: `FirebaseAuth` and `StyledFirebaseAuth`. - `FirebaseAuth` has a reference to the FirebaseUI CSS file (it `requires` the CSS). - `StyledFirebaseAuth` is bundled with the CSS directly. - -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. + +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. ### Using `StyledFirebaseAuth` with a redirect @@ -100,12 +103,12 @@ const config = { firebase.initializeApp(config); class SignInScreen extends React.Component { - + // The component's Local state. state = { signedIn: false // Local signed-in state. }; - + // Configure FirebaseUI. uiConfig = { // Popup signin flow rather than redirect flow. @@ -122,12 +125,12 @@ class SignInScreen extends React.Component { }; // Listen to the Firebase Auth state and set the local state. - componentWillMount() { + componentDidMount() { firebase.auth().onAuthStateChanged( (user) => this.setState({signedIn: !!user}) ); } - + render() { if (!this.state.signedIn) { return ( @@ -261,8 +264,8 @@ If you are using CSS modules in your app you need to handle the CSS files in `/n } ``` -## Styling - +## Styling + 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: ```js @@ -278,9 +281,9 @@ Alternatively you can include the styling in a `