Skip to content

Commit 94c1460

Browse files
author
Thomas Cesare-Herriau
committed
Added an examples/demo folder that contains the code of a very basic demo app that lets the user sign in using FirebaseUI, either with popup or redirect.
Demo: https://fir-ui-demo-84a6c.firebaseapp.com Change-Id: Ifa24dc40f7ceee3121b4f6f44722f85497d5168c
1 parent c50e958 commit 94c1460

File tree

8 files changed

+276
-0
lines changed

8 files changed

+276
-0
lines changed

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
**/*.log
2+
.DS_Store
3+
**/.firebaserc

‎examples/demo/README.md‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# FirebaseUI for web - Auth Demo
2+
3+
Accessible here:
4+
[https://fir-ui-demo-84a6c.firebaseapp.com](https://fir-ui-demo-84a6c.firebaseapp.com).
5+
6+
## Prerequisite
7+
8+
You need to have created a Firebase Project in the
9+
[Firebase Console](https://firebase.google.com/console/) as well as configured a web app.
10+
11+
## Installation
12+
13+
Install the firebase command line tool with `npm install -g firebase-tools` (See
14+
[docs](https://firebase.google.com/docs/cli/#setup)).
15+
16+
Enable the Auth providers you would like to offer your users in the console, under
17+
Auth > Sign-in methods.
18+
19+
Run:
20+
21+
git clone https://github.com/firebase/firebaseui-web.git
22+
cd firebaseui-web/examples/demo
23+
firebase use --add
24+
25+
This will clone the repository in the current directory, and start a wizard to configure firebase
26+
for your app. Select the project you have created in the prerequisite, and type in `default` or
27+
any other name as the alias to use for this project.
28+
29+
Then copy and paste the Web snippet code found in the console (either by clicking "Add Firebase to
30+
your web app" button in your Project overview, or clicking the "Web setup" button in the Auth page)
31+
in the `index.html` and `widget.html` files.
32+
33+
## Deploy
34+
35+
Run `firebase serve` to run a server locally (default: http://localhost:5000) or `firebase deploy` to
36+
deploy the demo.

‎examples/demo/database.rules.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
// WARNING: This configuration is for development purpose only, as this lets
2+
// anyone read/write in your database.
3+
{
4+
".read": true,
5+
".write": true
6+
}

‎examples/demo/firebase.json‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"database": {
3+
"rules": "database.rules.json"
4+
},
5+
"hosting": {
6+
"public": "public",
7+
"rewrites": [
8+
{
9+
"source": "/widget",
10+
"destination": "/widget.html"
11+
},
12+
{
13+
"source": "**",
14+
"destination": "/index.html"
15+
}
16+
]
17+
}
18+
}

‎examples/demo/public/app.js‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
/**
2+
* Redirects to the FirebaseUI widget.
3+
*/
4+
var signInWithRedirect = function() {
5+
window.location.assign('/widget');
6+
};
7+
8+
9+
/**
10+
* Open a popup with the FirebaseUI widget.
11+
*/
12+
var signInWithPopup = function() {
13+
window.open('/widget', 'Sign In', 'width=985,height=735');
14+
};
15+
16+
17+
/**
18+
* Displays the UI for a signed in user.
19+
*/
20+
var handleSignedInUser = function(user) {
21+
document.getElementById('user-signed-in').style.display = 'block';
22+
document.getElementById('user-signed-out').style.display = 'none';
23+
document.getElementById('name').textContent = user.displayName;
24+
document.getElementById('email').textContent = user.email;
25+
if (user.photoURL){
26+
document.getElementById('photo').src = user.photoURL;
27+
document.getElementById('photo').style.display = 'block';
28+
} else {
29+
document.getElementById('photo').style.display = 'none';
30+
}
31+
};
32+
33+
34+
/**
35+
* Displays the UI for a signed out user.
36+
*/
37+
var handleSignedOutUser = function() {
38+
document.getElementById('user-signed-in').style.display = 'none';
39+
document.getElementById('user-signed-out').style.display = 'block';
40+
};
41+
42+
// Listen to change in auth state so it displays the correct UI for when
43+
// the user is signed in or not.
44+
firebase.auth().onAuthStateChanged(function(user) {
45+
user ? handleSignedInUser(user) : handleSignedOutUser();
46+
});
47+
48+
49+
/**
50+
* Initializes the app.
51+
*/
52+
var initApp = function() {
53+
document.getElementById('sign-in-with-redirect').addEventListener(
54+
'click', signInWithRedirect);
55+
document.getElementById('sign-in-with-popup').addEventListener(
56+
'click', signInWithPopup);
57+
document.getElementById('sign-out').addEventListener('click', function() {
58+
firebase.auth().signOut();
59+
});
60+
document.getElementById('delete-account').addEventListener(
61+
'click', function() {
62+
firebase.auth().currentUser.delete();
63+
});
64+
};
65+
66+
window.addEventListener('load', initApp);

‎examples/demo/public/index.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>FirebaseUI Auth Demo</title>
6+
<!-- COPY AND PASTE THE WEB SETUP SNIPPET HERE: -->
7+
8+
<!-- END OF WEB SNIPPET -->
9+
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
10+
<meta name="viewport" content="width=device-width, initial-scale=1">
11+
</head>
12+
<body>
13+
<div id="container">
14+
<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>
19+
</div>
20+
<div id="name"></div>
21+
<div id="email"></div>
22+
<div class="clearfix"></div>
23+
</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>
35+
</div>
36+
</div>
37+
<script src="app.js"></script>
38+
</body>
39+
</html>

‎examples/demo/public/style.css‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
5+
body {
6+
margin: 0;
7+
}
8+
9+
#container {
10+
text-align: center;
11+
}
12+
13+
.clearfix {
14+
clear: both;
15+
}
16+
17+
.hidden {
18+
display: none;
19+
}
20+
21+
#user-info {
22+
border: 1px solid #CCC;
23+
clear: both;
24+
margin: 0 auto 20px;
25+
max-width: 400px;
26+
padding: 10px;
27+
text-align: left;
28+
}
29+
30+
#photo-container {
31+
background-color: #EEE;
32+
border: 1px solid #CCC;
33+
float: left;
34+
height: 80px;
35+
margin-right: 10px;
36+
width: 80px;
37+
}
38+
39+
#photo {
40+
height: 80px;
41+
margin: 0;
42+
width: 80px;
43+
}
44+
45+
@media (max-width: 300px) {
46+
#photo-container,
47+
#photo {
48+
height: 40px;
49+
width: 40px;
50+
}
51+
}

‎examples/demo/public/widget.html‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>FirebaseUI Auth Demo</title>
6+
<!-- COPY AND PASTE THE WEB SETUP SNIPPET HERE: -->
7+
8+
<!-- END OF WEB SNIPPET -->
9+
<script src="https://www.gstatic.com/firebasejs/ui/live/0.4/firebase-ui-auth.js"></script>
10+
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/live/0.4/firebase-ui-auth.css" />
11+
<style>
12+
body {
13+
margin: 0;
14+
}
15+
</style>
16+
<meta name="viewport" content="width=device-width, initial-scale=1">
17+
<script type="text/javascript">
18+
// FirebaseUI config.
19+
var uiConfig = {
20+
// Url to redirect to after a successful sign-in.
21+
'signInSuccessUrl': '/',
22+
'callbacks': {
23+
'signInSuccess': function(user, credential, redirectUrl) {
24+
if (window.opener) {
25+
// The widget has been opened in a popup, so close the window
26+
// and return false to not redirect the opener.
27+
window.close();
28+
return false;
29+
} else {
30+
// The widget has been used in redirect mode, so we redirect to the signInSuccessUrl.
31+
return true;
32+
}
33+
}
34+
},
35+
'signInOptions': [
36+
// TODO(developer): Remove the providers you don't need for your app.
37+
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
38+
firebase.auth.FacebookAuthProvider.PROVIDER_ID,
39+
firebase.auth.TwitterAuthProvider.PROVIDER_ID,
40+
firebase.auth.GithubAuthProvider.PROVIDER_ID,
41+
firebase.auth.EmailAuthProvider.PROVIDER_ID
42+
],
43+
// Terms of service url.
44+
'tosUrl': 'https://www.google.com'
45+
};
46+
47+
// Initialize the FirebaseUI Widget using Firebase.
48+
var ui = new firebaseui.auth.AuthUI(firebase.auth());
49+
// The start method will wait until the DOM is loaded to include the FirebaseUI sign-in widget
50+
// within the element corresponding to the selector specified.
51+
ui.start('#firebaseui-auth-container', uiConfig);
52+
</script>
53+
</head>
54+
<body>
55+
<div id="firebaseui-auth-container"></div>
56+
</body>
57+
</html>

0 commit comments

Comments
 (0)