Merge pull request #1 from FirebaseExtended/fundamentals/getting-star…

…ted-with-auth-web

🚀 Add sample project for Getting started with Firebase Authentication on the web - Firebase Fundamentals

.gitignore

@@ -0,0 +1,28 @@
+### macOS ###
+# General
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk

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

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "dummy-project-id"
+  }
+}

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

@@ -0,0 +1,66 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+firebase-debug.log*
+firebase-debug.*.log*
+
+# Firebase cache
+.firebase/
+
+# Firebase config
+
+# Uncomment this if you'd like others to create their own Firebase project.
+# For a team working on the same Firebase project(s), it is recommended to leave
+# it commented so all members can deploy to the same project(s) in .firebaserc.
+# .firebaserc
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env

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

@@ -0,0 +1,39 @@
+# Firebase Fundamentals: Getting Started with Firebase Authentication on the Web
+
+This is the source code used in this video: [Getting started with Firebase Authentication on the web](https://youtu.be/rbuSx1yEgV8).
+
+## Prerequisites
+
+* Install the Firebase CLI tools and the Firebase Emulator suite ([instructions](https://firebase.google.com/docs/emulator-suite/install_and_configure))
+
+## How to use
+
+1. Clone the repository
+2. Navigate into the root folder of this project
+3. Install the dependencies
+
+    ```bash
+    $ npm install
+    ```
+
+4.  Run webpack to bundle your code:
+
+    ```bash
+    $ npx webpack
+    ```
+
+5. Run the Firebase Emulator to host your app locally:
+
+    ```bash
+    $ firebase emulators:start
+    ```
+
+6. Open `http://localhost:5001` in your browser
+  ![](images/login.png)
+7. Sign up using an email address and password of your choice (e.g. `[email protected]`)
+8. You should now be signed in
+  ![](images/loggedin.png)
+9. Navigate to `http://localhost:4000/auth` to see the newly created user in the Firebase Authentication Emulator UI
+  ![](images/auth_emulator_ui.png)
+10. Go back to the app, and sign out
+11. Sign in using the credentials you used to create the test account

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

@@ -0,0 +1,21 @@
+{
+  "emulators": {
+    "auth": {
+      "port": 9099
+    },
+    "hosting": {
+      "port": 5001
+    },
+    "ui": {
+      "enabled": true
+    }
+  },
+  "hosting": {
+    "public": "dist",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ]
+  }
+}

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

@@ -0,0 +1,23 @@
+{
+  "name": "getting-started-auth-web",
+  "version": "1.0.0",
+  "description": "Getting started with Firebase Authentication on the web - Firebase Fundamentals",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "webpack"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "firebase": "^9.0.1"
+  },
+  "devDependencies": {
+    "css-loader": "^6.3.0",
+    "html-webpack-plugin": "^5.3.2",
+    "style-loader": "^3.3.0",
+    "webpack": "^5.51.1",
+    "webpack-cli": "^4.8.0"
+  }
+}

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

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Getting started with Firebase Auth</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+
+<body>
+
+  <div id="login">
+    <div class="header">
+      <h1>Getting Started with Firebase Auth</h1>
+    </div>
+    <form>
+      <div class="group">
+        <input id="txtEmail" type="email">
+        <label>Email</label>
+      </div>
+      <div class="group">
+        <input id="txtPassword" type="password">
+        <label>Password</label>
+      </div>
+      <div id="divLoginError" class="group">
+        <div id="lblLoginErrorMessage" class="errorlabel">Error message</div>
+      </div>
+      <button id="btnLogin" type="button" class="button buttonBlue">Log in</button>
+      <button id="btnSignup" type="button" class="button buttonBlue">Sign up</button>
+    </form>
+  </div>
+
+  <div id="app">
+    <div class="header">
+      <h1>Welcome to Your Amazing App</h1>
+    </div>
+    <form>
+      <div class="group">
+        <div id="lblAuthState" class="authlabel"></div>
+      </div>
+      <button id="btnLogout" type="button" class="button buttonBlue">Log out</button>
+    </form>
+  </div>
+
+  <footer>
+    <a href="https://firebase.google.com/" target="_blank"><img
+        src="https://firebase.google.com/images/brand-guidelines/logo-standard.png"></a>
+  </footer>
+
+</body>
+
+</html>

fundamentals/getting-started-with-auth-web/src/index.js

@@ -0,0 +1,95 @@
+import './styles.css';
+import { 
+  hideLoginError, 
+  showLoginState, 
+  showLoginForm, 
+  showApp, 
+  showLoginError, 
+  btnLogin,
+  btnSignup,
+  btnLogout
+} from './ui'
+
+import { initializeApp } from 'firebase/app';
+import { 
+  getAuth,
+  onAuthStateChanged, 
+  signOut,
+  createUserWithEmailAndPassword,
+  signInWithEmailAndPassword,
+  connectAuthEmulator
+} from 'firebase/auth';
+
+const firebaseApp = initializeApp({
+  apiKey: "dummy-apiKey",
+  authDomain: "dummy-authDomain.firebaseapp.com",
+  projectId: "dummy-project-id",
+  storageBucket: "dummy-authDomain.firebaseapp.com",
+  messagingSenderId: "123456789012",
+  appId: "1:123456789012:web:7c7abae699b868b7f896ec",
+  measurementId: "G-ABCDEFGHIJ"
+});
+
+// Login using email/password
+const loginEmailPassword = async () => {
+  const loginEmail = txtEmail.value
+  const loginPassword = txtPassword.value
+
+  // step 1: try doing this w/o error handling, and then add try/catch
+  await signInWithEmailAndPassword(auth, loginEmail, loginPassword)
+
+  // step 2: add error handling
+  // try {
+  //   await signInWithEmailAndPassword(auth, loginEmail, loginPassword)
+  // }
+  // catch(error) {
+  //   console.log(`There was an error: ${error}`)
+  //   showLoginError(error)
+  // }
+}
+
+// Create new account using email/password
+const createAccount = async () => {
+  const email = txtEmail.value
+  const password = txtPassword.value
+
+  try {
+    await createUserWithEmailAndPassword(auth, email, password)
+  }
+  catch(error) {
+    console.log(`There was an error: ${error}`)
+    showLoginError(error)
+  } 
+}
+
+// Monitor auth state
+const monitorAuthState = async () => {
+  onAuthStateChanged(auth, user => {
+    if (user) {
+      console.log(user)
+      showApp()
+      showLoginState(user)
+
+      hideLoginError()
+      hideLinkError()
+    }
+    else {
+      showLoginForm()
+      lblAuthState.innerHTML = `You're not logged in.`
+    }
+  })
+}
+
+// Log out
+const logout = async () => {
+  await signOut(auth);
+}
+
+btnLogin.addEventListener("click", loginEmailPassword) 
+btnSignup.addEventListener("click", createAccount)
+btnLogout.addEventListener("click", logout)
+
+const auth = getAuth(firebaseApp);
+connectAuthEmulator(auth, "http://localhost:9099");
+
+monitorAuthState();