Skip to content

Commit 7dc12c2

Browse files
bojeil-googlebojeil-google
authored
Adds a demo app to help test and facilitate Firebase Auth API development (#279)
* Adds a demo app to help test and facilitate Firebase Auth API development.
1 parent 60d8f4f commit 7dc12c2

File tree

13 files changed

+2299
-1
lines changed

13 files changed

+2299
-1
lines changed

‎packages/auth/.gitignore

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,5 +13,6 @@ dist/
1313
*~
1414
*.swp
1515

16-
#Local config.
16+
# Local config.
1717
**/.firebaserc
18+
demo/public/config.js

‎packages/auth/buildtools/run_demo.sh

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
#!/bin/bash
2+
# Copyright 2017 Google Inc. All Rights Reserved.
3+
#
4+
# Licensed under the Apache License, Version 2.0 (the "License");
5+
# you may not use this file except in compliance with the License.
6+
# You may obtain a copy of the License at
7+
#
8+
# http://www.apache.org/licenses/LICENSE-2.0
9+
#
10+
# Unless required by applicable law or agreed to in writing, software
11+
# distributed under the License is distributed on an "AS-IS" BASIS,
12+
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
# See the License for the specific language governing permissions and
14+
# limitations under the License.
15+
16+
# Runs the server for the demo page.
17+
#
18+
# Usage:
19+
# $ buildtools/run_demo.sh
20+
21+
# CD to the root packages/auth directory, which should be the parent directory of
22+
# buildtools/.
23+
cd "$(dirname $(dirname "$0"))"
24+
# Go back to repo root and build all binaries needed for the demo app.
25+
cd ../..
26+
yarn prepare
27+
# Go back to Auth package.
28+
cd packages/auth
29+
# Make dist directory if not already there.
30+
mkdir -p demo/public/dist
31+
# Copy app, auth and database binaries to demo dist directory.
32+
cp ../firebase/firebase-app.js demo/public/dist/firebase-app.js
33+
cp ../firebase/firebase-auth.js demo/public/dist/firebase-auth.js
34+
cp ../firebase/firebase-database.js demo/public/dist/firebase-database.js
35+
# Serve demo app.
36+
cd demo
37+
`yarn bin`/firebase serve

‎packages/auth/demo/README.md

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
# Firebase-Auth for web - Auth Demo
2+
3+
## Prerequisite
4+
5+
You need to have created a Firebase Project in the
6+
[Firebase Console](https://firebase.google.com/console/) as well as configured a web app.
7+
8+
## Installation
9+
Make sure you run `yarn` to install all dependencies in the root directory.
10+
11+
Enable the Auth providers you would like to offer your users in the console, under
12+
Auth > Sign-in methods.
13+
14+
Run:
15+
16+
```bash
17+
git clone https://github.com/firebase/firebase-js-sdk.git
18+
cd firebase-js-sdk/packages/auth/demo
19+
```
20+
21+
This will clone the repository in the current directory.
22+
23+
If you want to be able to deploy the demo app to one of your own Firebase Hosting instance,
24+
configure it using the following command:
25+
26+
```bash
27+
firebase use --add
28+
```
29+
30+
Select the project you have created in the prerequisite, and type in `default` or
31+
any other name as the alias to use for this project.
32+
33+
Copy `public/sample-config.js` to `public/config.js`:
34+
35+
```bash
36+
cp public/sample-config.js public/config.js
37+
```
38+
39+
Then copy and paste the Web snippet config found in the console (either by clicking "Add Firebase to
40+
your web app" button in your Project overview, or clicking the "Web setup" button in the Auth page)
41+
in the `config.js` file.
42+
43+
## Deploy
44+
45+
### Option 1: Compile and use local Firebase Auth files
46+
47+
To deploy the demo app, run the following command in the root directory of Firebase Auth (use `cd ..`
48+
first if you are still in the `demo/` folder):
49+
50+
```bash
51+
yarn run demo
52+
```
53+
54+
This will compile all the files needed to run Firebase Auth, and start a Firebase server locally at
55+
[http://localhost:5000](http://localhost:5000).
56+
57+
### Option 2: Use CDN hosted Firebase files
58+
59+
If you would prefer to use a CDN instead of locally compiled Firebase Auth files, you can instead
60+
locate the following in the `<head>` tag of `public/index.html`:
61+
62+
```html
63+
<script src="dist/firebase-app.js"></script>
64+
<script src="dist/firebase-auth.js"></script>
65+
<script src="dist/firebase-database.js"></script>
66+
```
67+
68+
Then replace that with the public CDN:
69+
70+
```html
71+
<script src="https://www.gstatic.com/firebasejs/4.6.0/firebase.js"></script>
72+
```
73+
74+
Finally, ensure you are in the `demo/` folder (and not the root directory of Firebase Auth package),
75+
and run:
76+
77+
```bash
78+
yarn run demo
79+
```
80+
81+
This will start a Firebase server locally at [http://localhost:5000](http://localhost:5000).

‎packages/auth/demo/database.rules.json

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"rules": {
3+
".read": "auth != null",
4+
".write": "auth != null",
5+
"users": {
6+
"$user_id": {
7+
".read": "$user_id === auth.uid",
8+
".write": "$user_id === auth.uid"
9+
}
10+
}
11+
}
12+
}
13+

‎packages/auth/demo/firebase.json

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

‎packages/auth/demo/public/common.js

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
/**
2+
* Copyright 2017 Google Inc.
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
/**
18+
* @fileoverview Utilities for Auth test app features.
19+
*/
20+
21+
22+
/**
23+
* Initializes the widget for toggling reCAPTCHA size.
24+
* @param {function(string):void} callback The callback to call when the
25+
* size toggler is changed, which takes in the new reCAPTCHA size.
26+
*/
27+
function initRecaptchaToggle(callback) {
28+
// Listen to recaptcha config togglers.
29+
var $recaptchaConfigTogglers = $('.toggleRecaptcha');
30+
$recaptchaConfigTogglers.click(function(e) {
31+
// Remove currently active option.
32+
$recaptchaConfigTogglers.removeClass('active');
33+
// Set currently selected option.
34+
$(this).addClass('active');
35+
// Get the current reCAPTCHA setting label.
36+
var size = $(e.target).text().toLowerCase();
37+
callback(size);
38+
});
39+
}
40+
41+
// Install servicerWorker if supported.
42+
if ('serviceWorker' in navigator) {
43+
navigator.serviceWorker.register('/service-worker.js', {scope: '/'})
44+
.then(function(reg) {
45+
// Registration worked.
46+
console.log('Registration succeeded. Scope is ' + reg.scope);
47+
}).catch(function(error) {
48+
// Registration failed.
49+
console.log('Registration failed with ' + error.message);
50+
});
51+
}

0 commit comments

Comments
 (0)