Skip to content

Commit 5105fa5

Browse files
author
Alfonso Gomez Jordana Manas
committed
Revert "Updated README with the reset method."
This reverts commit ec97377. I pressed the submit button instead of reply 🤦 Change-Id: I3beec828941f4ff3c35b74d6713894c85e2ce47f
1 parent ec97377 commit 5105fa5

File tree

4 files changed

+26
-90
lines changed

4 files changed

+26
-90
lines changed

‎README.md‎

Lines changed: 7 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@ 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)
3130

3231
## Installation
3332

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

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

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+
7679
```html
7780
<!DOCTYPE html>
7881
<html>
@@ -332,21 +335,9 @@ When a user has enabled the private browsing mode in Safari, the web storage is
332335
currently results in an error being thrown upon Firebase Auth initialization. Therefore, when
333336
following the snippets above, FirebaseUI will never get initialized and no UI will be displayed.
334337

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

337340
When re-rendering the FirebaseUI Auth widget (for instance after signing in a user, signing her out
338341
and trying to sign her in again), it will fail with an `Uncaught Error: UI Widget is already
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.
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.

‎examples/demo/public/app.js‎

Lines changed: 0 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,3 @@
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-
331
/**
342
* Redirects to the FirebaseUI widget.
353
*/
@@ -69,23 +37,11 @@ var handleSignedInUser = function(user) {
6937
var handleSignedOutUser = function() {
7038
document.getElementById('user-signed-in').style.display = 'none';
7139
document.getElementById('user-signed-out').style.display = 'block';
72-
if (!uiRendered) {
73-
ui.start('#firebaseui-container', uiConfig);
74-
uiRendered = true;
75-
}
7640
};
7741

7842
// Listen to change in auth state so it displays the correct UI for when
7943
// the user is signed in or not.
8044
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-
}
8945
user ? handleSignedInUser(user) : handleSignedOutUser();
9046
});
9147

‎examples/demo/public/index.html‎

Lines changed: 18 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -7,42 +7,31 @@
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" />
1210
<meta name="viewport" content="width=device-width, initial-scale=1">
1311
</head>
1412
<body>
1513
<div id="container">
1614
<h3>FirebaseUI Demo</h3>
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>
15+
<div id="user-signed-in" class="hidden">
16+
<div id="user-info">
17+
<div id="photo-container">
18+
<img id="photo"></img>
4419
</div>
20+
<div id="name"></div>
21+
<div id="email"></div>
22+
<div class="clearfix"></div>
4523
</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>
4635
</div>
4736
</div>
4837
<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.5/firebase-ui-auth.js"></script>
9+
<script src="https://www.gstatic.com/firebasejs/ui/live/0.4/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)