Skip to content

Commit fdd958d

Browse files
sam-gcavolkovi
authored andcommitted
Add a demo page to auth-exp using the new modular methods (#3197)
* Add basic demo for new SDK * Formatting * Add anonymous auth and custom token * Formatting * Update to include newly-implemented pieces * Formatting
1 parent 5d91f76 commit fdd958d

15 files changed

+3336
-1
lines changed

packages-exp/auth-exp/demo/.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
src/config.js
2+
.firebaserc

packages-exp/auth-exp/demo/README.md

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
# Firebase-Auth for web - Auth Demo (Auth Next)
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-exp/auth-exp/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 `src/sample-config.js` to `src/config.js`:
34+
35+
```bash
36+
cp src/sample-config.js src/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+
Before deploying, you may need to build the auth-exp package:
46+
```bash
47+
yarn build:deps
48+
```
49+
50+
This can take some time, and you only need to do it if you've modified the auth-exp package.
51+
52+
To run the app locally, simply issue the following command in the `auth-exp/demo` directory:
53+
54+
```bash
55+
yarn run demo
56+
```
57+
58+
This will compile all the files needed to run Firebase Auth, and start a Firebase server locally at
59+
[http://localhost:5000](http://localhost:5000).
60+

packages-exp/auth-exp/demo/build.sh

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
#!/bin/bash
2+
3+
rollup -c
4+
mkdir -p public/dist
5+
cp dist/bundle.js public/dist
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+
+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"database": {
3+
"rules": "database.rules.json"
4+
},
5+
"hosting": {
6+
"public": "public"
7+
}
8+
}
+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
{
2+
"name": "@firebase/auth-exp-demo",
3+
"version": "0.1.0",
4+
"private": true,
5+
"description": "Demo for Auth TS SDK",
6+
"author": "Firebase <[email protected]> (https://firebase.google.com/)",
7+
"bundle": "dist/bundle.js",
8+
"files": [
9+
"dist"
10+
],
11+
"scripts": {
12+
"build": "sh build.sh",
13+
"demo": "sh build.sh && firebase serve",
14+
"build:deps": "lerna run --scope @firebase/'{app-exp,auth-exp}' --include-dependencies build",
15+
"dev": "rollup -c -w"
16+
},
17+
"peerDependencies": {
18+
"@firebase/app-exp": "0.x",
19+
"@firebase/app-types-exp": "0.x",
20+
"@firebase/auth-types-exp": "0.x"
21+
},
22+
"dependencies": {
23+
"@firebase/logger": "^0.2.2",
24+
"@firebase/util": "^0.2.44",
25+
"lerna": "^3.22.1",
26+
"tslib": "1.11.1"
27+
},
28+
"license": "Apache-2.0",
29+
"devDependencies": {
30+
"@rollup/plugin-node-resolve": "^8.0.1",
31+
"@rollup/plugin-strip": "^1.3.2",
32+
"rollup": "1.32.1",
33+
"rollup-plugin-json": "4.0.0",
34+
"rollup-plugin-replace": "2.2.0",
35+
"rollup-plugin-typescript2": "0.26.0"
36+
},
37+
"repository": {
38+
"directory": "packages-exp/auth-exp/demo",
39+
"type": "git",
40+
"url": "https://github.com/firebase/firebase-js-sdk.git"
41+
},
42+
"bugs": {
43+
"url": "https://github.com/firebase/firebase-js-sdk/issues"
44+
},
45+
"typings": "dist/index.d.ts",
46+
"nyc": {
47+
"extension": [
48+
".ts"
49+
],
50+
"reportDir": "./coverage/node"
51+
}
52+
}
+111
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
/**
2+
* @license
3+
* Copyright 2017 Google LLC
4+
*
5+
* Licensed under the Apache License, Version 2.0 (the "License");
6+
* you may not use this file except in compliance with the License.
7+
* You may obtain a copy of the License at
8+
*
9+
* http://www.apache.org/licenses/LICENSE-2.0
10+
*
11+
* Unless required by applicable law or agreed to in writing, software
12+
* distributed under the License is distributed on an "AS IS" BASIS,
13+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14+
* See the License for the specific language governing permissions and
15+
* limitations under the License.
16+
*/
17+
18+
/**
19+
* @fileoverview Utilities for Auth test app features.
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)
37+
.text()
38+
.toLowerCase();
39+
callback(size);
40+
});
41+
}
42+
43+
// Install servicerWorker if supported.
44+
if ('serviceWorker' in navigator) {
45+
navigator.serviceWorker
46+
.register('/service-worker.js', { scope: '/' })
47+
.then(function(reg) {
48+
// Registration worked.
49+
console.log('Registration succeeded. Scope is ' + reg.scope);
50+
})
51+
.catch(function(error) {
52+
// Registration failed.
53+
console.log('Registration failed with ' + error.message);
54+
});
55+
}
56+
57+
var webWorker = null;
58+
if (window.Worker) {
59+
webWorker = new Worker('/web-worker.js');
60+
/**
61+
* Handles the incoming message from the web worker.
62+
* @param {!Object} e The message event received.
63+
*/
64+
webWorker.onmessage = function(e) {
65+
console.log('User data passed through web worker: ', e.data);
66+
switch (e.data.type) {
67+
case 'GET_USER_INFO':
68+
alertSuccess(
69+
'User data passed through web worker: ' + JSON.stringify(e.data)
70+
);
71+
break;
72+
case 'RUN_TESTS':
73+
if (e.data.status == 'success') {
74+
alertSuccess('Web worker tests ran successfully!');
75+
} else {
76+
alertError('Error: ' + JSON.stringify(e.data.error));
77+
}
78+
break;
79+
default:
80+
return;
81+
}
82+
};
83+
}
84+
85+
/**
86+
* Asks the web worker, if supported in current browser, to return the user info
87+
* corresponding to the currentUser as seen within the worker.
88+
*/
89+
function onGetCurrentUserDataFromWebWorker() {
90+
if (webWorker) {
91+
webWorker.postMessage({ type: 'GET_USER_INFO' });
92+
} else {
93+
alertError('Error: Web workers are not supported in the current browser!');
94+
}
95+
}
96+
97+
/**
98+
* Runs various Firebase Auth tests in a web worker environment and confirms the
99+
* expected behavior. This is useful for manual testing in different browsers.
100+
* @param {string} googleIdToken The Google ID token to sign in with.
101+
*/
102+
function runWebWorkerTests(googleIdToken) {
103+
if (webWorker) {
104+
webWorker.postMessage({
105+
type: 'RUN_TESTS',
106+
googleIdToken: googleIdToken
107+
});
108+
} else {
109+
alertError('Error: Web workers are not supported in the current browser!');
110+
}
111+
}

0 commit comments

Comments
 (0)