Skip to content

Commit ec97377

Browse files
author
Thomas Cesare-Herriau
committed
Updated README with the reset method.
Updated demo app to display the widget in SPA mode. Change-Id: I30102aaf71d3a1275a77596f69f44cff1cf2ea08
1 parent f2e3971 commit ec97377

File tree

4 files changed

+90
-26
lines changed

4 files changed

+90
-26
lines changed

‎README.md‎

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ Ionic...) nor Chrome extensions.
2727
4. [Customization](#customizing-firebaseui-for-authentication)
2828
5. [Advanced](#advanced)
2929
6. [Known issues](#known-issues)
30+
7. [Release Notes](#release-notes)
3031

3132
## Installation
3233

@@ -72,10 +73,6 @@ object.
7273

7374
The following example shows how to set up a sign-in screen with all supported providers.
7475

75-
> We recommend opening the widget in a popup window or redirecting to it, as a
76-
> [known issue with single page applications](#web-single-page-applications-are-not-fully-supported)
77-
> may lead to a rendering bug.
78-
7976
```html
8077
<!DOCTYPE html>
8178
<html>
@@ -335,9 +332,21 @@ When a user has enabled the private browsing mode in Safari, the web storage is
335332
currently results in an error being thrown upon Firebase Auth initialization. Therefore, when
336333
following the snippets above, FirebaseUI will never get initialized and no UI will be displayed.
337334

338-
### Web Single Page Applications are not fully supported
335+
### Tips for Single Page apps (`UI Widget is already rendered on the page` error)
339336

340337
When re-rendering the FirebaseUI Auth widget (for instance after signing in a user, signing her out
341338
and trying to sign her in again), it will fail with an `Uncaught Error: UI Widget is already
342-
initialized on the page. Only one widget instance can be initialized per page.` error. We recommend
343-
using the widget in a popup window or redirecting to it while we work on a fix for this issue.
339+
rendered on the page. Only one widget instance can be rendered per page. Reset the previous instance
340+
before rendering a new one.` error. You can use the `reset()` method when removing the widget to
341+
make sure you can draw it again.
342+
343+
## Release Notes
344+
345+
### 0.5
346+
347+
- FirebaseUI now supports Single Page Application: a `reset` method was added to allow to dispose
348+
of the widget. When the user leaves a page where the FirebaseUI widget was rendered (for instance
349+
in a `componentWillUnmount` in a React component), call the `reset` method of the
350+
`firebaseui.auth.AuthUI` instance you created. Also, call the `reset` method before rendering
351+
again the widget if any has already been rendered on the page. Please refer to the demo for guidance
352+
on how to use FirebaseUI in a Single Page Application context.

‎examples/demo/public/app.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,35 @@
1+
/**
2+
* FirebaseUI initialization to be used in a Single Page application context.
3+
*/
4+
// FirebaseUI config.
5+
var uiConfig = {
6+
// Url to redirect to after a successful sign-in.
7+
'callbacks': {
8+
'signInSuccess': function(user, credential, redirectUrl) {
9+
// The widget will automatically be disposed as we prevent redirection
10+
// below.
11+
uiRendered = false;
12+
handleSignedInUser(user);
13+
// Do not redirect.
14+
return false;
15+
}
16+
},
17+
'signInOptions': [
18+
// TODO(developer): Remove the providers you don't need for your app.
19+
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
20+
firebase.auth.FacebookAuthProvider.PROVIDER_ID,
21+
firebase.auth.TwitterAuthProvider.PROVIDER_ID,
22+
firebase.auth.GithubAuthProvider.PROVIDER_ID,
23+
firebase.auth.EmailAuthProvider.PROVIDER_ID
24+
],
25+
// Terms of service url.
26+
'tosUrl': 'https://www.google.com'
27+
};
28+
29+
// Initialize the FirebaseUI Widget using Firebase.
30+
var ui = new firebaseui.auth.AuthUI(firebase.auth());
31+
var uiRendered = false;
32+
133
/**
234
* Redirects to the FirebaseUI widget.
335
*/
@@ -37,11 +69,23 @@ var handleSignedInUser = function(user) {
3769
var handleSignedOutUser = function() {
3870
document.getElementById('user-signed-in').style.display = 'none';
3971
document.getElementById('user-signed-out').style.display = 'block';
72+
if (!uiRendered) {
73+
ui.start('#firebaseui-container', uiConfig);
74+
uiRendered = true;
75+
}
4076
};
4177

4278
// Listen to change in auth state so it displays the correct UI for when
4379
// the user is signed in or not.
4480
firebase.auth().onAuthStateChanged(function(user) {
81+
document.getElementById('loading').style.display = 'none';
82+
document.getElementById('loaded').style.display = 'block';
83+
if (ui.isPending()) {
84+
// We need to resolve the pending FirebaseUI operations, so we display
85+
// the widget.
86+
handleSignedOutUser();
87+
return;
88+
}
4589
user ? handleSignedInUser(user) : handleSignedOutUser();
4690
});
4791

‎examples/demo/public/index.html‎

Lines changed: 29 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -7,31 +7,42 @@
77

88
<!-- END OF WEB SNIPPET -->
99
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
10+
<script src="https://www.gstatic.com/firebasejs/ui/live/0.5/firebase-ui-auth.js"></script>
11+
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/staging/0.5.0/firebase-ui-auth.css" />
1012
<meta name="viewport" content="width=device-width, initial-scale=1">
1113
</head>
1214
<body>
1315
<div id="container">
1416
<h3>FirebaseUI Demo</h3>
15-
<div id="user-signed-in" class="hidden">
16-
<div id="user-info">
17-
<div id="photo-container">
18-
<img id="photo"></img>
17+
<div id="loading">Loading...</div>
18+
<div id="loaded" class="hidden">
19+
<div id="main">
20+
<div id="user-signed-in" class="hidden">
21+
<div id="user-info">
22+
<div id="photo-container">
23+
<img id="photo"></img>
24+
</div>
25+
<div id="name"></div>
26+
<div id="email"></div>
27+
<div class="clearfix"></div>
28+
</div>
29+
<p>
30+
<button id="sign-out">Sign Out</button>
31+
<button id="delete-account">Delete account</button>
32+
</p>
33+
</div>
34+
<div id="user-signed-out" class="hidden">
35+
<h4>You are signed out.</h4>
36+
<p>
37+
<button id="sign-in-with-redirect">Sign In with Redirect</button>
38+
<button id="sign-in-with-popup">Sign In with Popup</button>
39+
</p>
40+
<div id="firebaseui-spa">
41+
<h5>Single Page Application mode:</h5>
42+
<div id="firebaseui-container"></div>
43+
</div>
1944
</div>
20-
<div id="name"></div>
21-
<div id="email"></div>
22-
<div class="clearfix"></div>
2345
</div>
24-
<p>
25-
<button id="sign-out">Sign Out</button>
26-
<button id="delete-account">Delete account</button>
27-
</p>
28-
</div>
29-
<div id="user-signed-out" class="hidden">
30-
<h4>You are signed out.</h4>
31-
<p>
32-
<button id="sign-in-with-redirect">Sign In with Redirect</button>
33-
<button id="sign-in-with-popup">Sign In with Popup</button>
34-
</p>
3546
</div>
3647
</div>
3748
<script src="app.js"></script>

‎examples/demo/public/widget.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<!-- COPY AND PASTE THE WEB SETUP SNIPPET HERE: -->
77

88
<!-- END OF WEB SNIPPET -->
9-
<script src="https://www.gstatic.com/firebasejs/ui/live/0.4/firebase-ui-auth.js"></script>
9+
<script src="https://www.gstatic.com/firebasejs/ui/live/0.5/firebase-ui-auth.js"></script>
1010
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/live/0.4/firebase-ui-auth.css" />
1111
<style>
1212
body {

0 commit comments

Comments
 (0)