Skip to content

Commit 63a4aa8

Browse files
peterfriesepeterfriese
committed
🚀 Add sample project for Getting started with Firebase Authentication on the web - Firebase Fundamentals
Signed-off-by: Peter Friese <[email protected]>
1 parent 69dac0f commit 63a4aa8

File tree

14 files changed

+657
-0
lines changed

14 files changed

+657
-0
lines changed

‎.gitignore‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
### macOS ###
2+
# General
3+
.DS_Store
4+
.AppleDouble
5+
.LSOverride
6+
7+
# Icon must end with two \r
8+
Icon
9+
10+
11+
# Thumbnails
12+
._*
13+
14+
# Files that might appear in the root of a volume
15+
.DocumentRevisions-V100
16+
.fseventsd
17+
.Spotlight-V100
18+
.TemporaryItems
19+
.Trashes
20+
.VolumeIcon.icns
21+
.com.apple.timemachine.donotpresent
22+
23+
# Directories potentially created on remote AFP share
24+
.AppleDB
25+
.AppleDesktop
26+
Network Trash Folder
27+
Temporary Items
28+
.apdisk

‎fundamentals/getting-started-with-auth-web/.firebaserc‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"projects": {
3+
"default": "dummy-project-id"
4+
}
5+
}

‎fundamentals/getting-started-with-auth-web/.gitignore‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
firebase-debug.log*
8+
firebase-debug.*.log*
9+
10+
# Firebase cache
11+
.firebase/
12+
13+
# Firebase config
14+
15+
# Uncomment this if you'd like others to create their own Firebase project.
16+
# For a team working on the same Firebase project(s), it is recommended to leave
17+
# it commented so all members can deploy to the same project(s) in .firebaserc.
18+
# .firebaserc
19+
20+
# Runtime data
21+
pids
22+
*.pid
23+
*.seed
24+
*.pid.lock
25+
26+
# Directory for instrumented libs generated by jscoverage/JSCover
27+
lib-cov
28+
29+
# Coverage directory used by tools like istanbul
30+
coverage
31+
32+
# nyc test coverage
33+
.nyc_output
34+
35+
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
36+
.grunt
37+
38+
# Bower dependency directory (https://bower.io/)
39+
bower_components
40+
41+
# node-waf configuration
42+
.lock-wscript
43+
44+
# Compiled binary addons (http://nodejs.org/api/addons.html)
45+
build/Release
46+
47+
# Dependency directories
48+
node_modules/
49+
50+
# Optional npm cache directory
51+
.npm
52+
53+
# Optional eslint cache
54+
.eslintcache
55+
56+
# Optional REPL history
57+
.node_repl_history
58+
59+
# Output of 'npm pack'
60+
*.tgz
61+
62+
# Yarn Integrity file
63+
.yarn-integrity
64+
65+
# dotenv environment variables file
66+
.env

‎fundamentals/getting-started-with-auth-web/README.md‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
# Firebase Fundamentals: Getting Started with Firebase Authentication on the Web
2+
3+
This is the source code used in this video: [Getting started with Firebase Authentication on the web](https://youtu.be/rbuSx1yEgV8).
4+
5+
## Prerequisites
6+
7+
* Install the Firebase CLI tools and the Firebase Emulator suite ([instructions](https://firebase.google.com/docs/emulator-suite/install_and_configure))
8+
9+
## How to use
10+
11+
1. Clone the repository
12+
2. Navigate into the root folder of this project
13+
3. Install the dependencies
14+
15+
```bash
16+
$ npm install
17+
```
18+
19+
4. Run webpack to bundle your code:
20+
21+
```bash
22+
$ npx webpack
23+
```
24+
25+
5. Run the Firebase Emulator to host your app locally:
26+
27+
```bash
28+
$ firebase emulators:start
29+
```
30+
31+
6. Open `http://localhost:5001` in your browser
32+
![](images/login.png)
33+
7. Sign up using an email address and password of your choice (e.g. `[email protected]`)
34+
8. You should now be signed in
35+
![](images/loggedin.png)
36+
9. Navigate to `http://localhost:4000/auth` to see the newly created user in the Firebase Authentication Emulator UI
37+
![](images/auth_emulator_ui.png)
38+
10. Go back to the app, and sign out
39+
11. Sign in using the credentials you used to create the test account

‎fundamentals/getting-started-with-auth-web/firebase.json‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"emulators": {
3+
"auth": {
4+
"port": 9099
5+
},
6+
"hosting": {
7+
"port": 5001
8+
},
9+
"ui": {
10+
"enabled": true
11+
}
12+
},
13+
"hosting": {
14+
"public": "dist",
15+
"ignore": [
16+
"firebase.json",
17+
"**/.*",
18+
"**/node_modules/**"
19+
]
20+
}
21+
}

‎fundamentals/getting-started-with-auth-web/images/auth_emulator_ui.png‎

731 KB
Loading

‎fundamentals/getting-started-with-auth-web/images/loggedin.png‎

676 KB
Loading

‎fundamentals/getting-started-with-auth-web/images/login.png‎

484 KB
Loading

‎fundamentals/getting-started-with-auth-web/package.json‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"name": "getting-started-auth-web",
3+
"version": "1.0.0",
4+
"description": "Getting started with Firebase Authentication on the web - Firebase Fundamentals",
5+
"main": "index.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1",
8+
"build": "webpack"
9+
},
10+
"keywords": [],
11+
"author": "",
12+
"license": "ISC",
13+
"dependencies": {
14+
"firebase": "^9.0.1"
15+
},
16+
"devDependencies": {
17+
"css-loader": "^6.3.0",
18+
"html-webpack-plugin": "^5.3.2",
19+
"style-loader": "^3.3.0",
20+
"webpack": "^5.51.1",
21+
"webpack-cli": "^4.8.0"
22+
}
23+
}

‎fundamentals/getting-started-with-auth-web/src/index.html‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Getting started with Firebase Auth</title>
9+
<link rel="stylesheet" href="styles.css">
10+
</head>
11+
12+
<body>
13+
14+
<div id="login">
15+
<div class="header">
16+
<h1>Getting Started with Firebase Auth</h1>
17+
</div>
18+
<form>
19+
<div class="group">
20+
<input id="txtEmail" type="email">
21+
<label>Email</label>
22+
</div>
23+
<div class="group">
24+
<input id="txtPassword" type="password">
25+
<label>Password</label>
26+
</div>
27+
<div id="divLoginError" class="group">
28+
<div id="lblLoginErrorMessage" class="errorlabel">Error message</div>
29+
</div>
30+
<button id="btnLogin" type="button" class="button buttonBlue">Log in</button>
31+
<button id="btnSignup" type="button" class="button buttonBlue">Sign up</button>
32+
</form>
33+
</div>
34+
35+
<div id="app">
36+
<div class="header">
37+
<h1>Welcome to Your Amazing App</h1>
38+
</div>
39+
<form>
40+
<div class="group">
41+
<div id="lblAuthState" class="authlabel"></div>
42+
</div>
43+
<button id="btnLogout" type="button" class="button buttonBlue">Log out</button>
44+
</form>
45+
</div>
46+
47+
<footer>
48+
<a href="https://firebase.google.com/" target="_blank"><img
49+
src="https://firebase.google.com/images/brand-guidelines/logo-standard.png"></a>
50+
</footer>
51+
52+
</body>
53+
54+
</html>

0 commit comments

Comments
 (0)