├── src
    ├── main.css
    ├── app
    │   ├── logout.js
    │   ├── loginCheck.js
    │   ├── firebase.js
    │   ├── postList.js
    │   ├── showMessage.js
    │   ├── githubLogin.js
    │   ├── facebookLogin.js
    │   ├── googleLogin.js
    │   ├── signinForm.js
    │   └── signupForm.js
    ├── main.js
    ├── 404.html
    └── index.html
├── firestore.indexes.json
├── .firebaserc
├── firebase.json
├── firestore.rules
├── README.md
├── package.json
└── .gitignore


/src/main.css:
--------------------------------------------------------------------------------
1 | body {
2 |   background: #202020;
3 |   color: white;
4 | }


--------------------------------------------------------------------------------
/firestore.indexes.json:
--------------------------------------------------------------------------------
1 | {
2 |   "indexes": [],
3 |   "fieldOverrides": []
4 | }
5 | 


--------------------------------------------------------------------------------
/.firebaserc:
--------------------------------------------------------------------------------
1 | {
2 |   "projects": {
3 |     "default": "fir-app-ea974"
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/firebase.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "firestore": {
 3 |     "rules": "firestore.rules",
 4 |     "indexes": "firestore.indexes.json"
 5 |   },
 6 |   "hosting": {
 7 |     "public": "src",
 8 |     "ignore": [
 9 |       "firebase.json",
10 |       "**/.*",
11 |       "**/node_modules/**"
12 |     ]
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/firestore.rules:
--------------------------------------------------------------------------------
 1 | rules_version = '2';
 2 | service cloud.firestore {
 3 |   match /databases/{database}/documents {
 4 |     match /posts/{postId} {
 5 |       allow read, write: if request.auth.uid != null;
 6 |       // allow write: if request.token.admin == true;
 7 |     }
 8 |     
 9 |     match /tasks/{taskId} {
10 |      allow read, write: if true == true;
11 |     }
12 |     
13 |   }
14 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Firebase Javacript Authentication
 2 | 
 3 | ### Installation
 4 | 
 5 | ```sh
 6 | git clone https://github.com/FaztWeb/firebase-auth-example
 7 | cd firebase-auth-example
 8 | npm i
 9 | ```
10 | 
11 | go to `src/app/firebase.js` and replace this with your firebase credentials:
12 | 
13 | ```js
14 | const firebaseConfig = {
15 |   // Paste your firebase config here
16 | };
17 | ```
18 | 
19 | ```
20 | firebase serve
21 | ```


--------------------------------------------------------------------------------
/src/app/logout.js:
--------------------------------------------------------------------------------
 1 | import { signOut } from "https://www.gstatic.com/firebasejs/9.10.0/firebase-auth.js"
 2 | import { auth } from "./firebase.js";
 3 | 
 4 | const logout = document.querySelector("#logout");
 5 | 
 6 | logout.addEventListener("click", async (e) => {
 7 |   e.preventDefault();
 8 |   try {
 9 |     await signOut(auth)
10 |     console.log("signup out");
11 |   } catch (error) {
12 |     console.log(error)
13 |   }
14 | });


--------------------------------------------------------------------------------
/src/app/loginCheck.js:
--------------------------------------------------------------------------------
 1 | const loggedOutLinks = document.querySelectorAll(".logged-out");
 2 | const loggedInLinks = document.querySelectorAll(".logged-in");
 3 | 
 4 | export const loginCheck = (user) => {
 5 |   if (user) {
 6 |     loggedInLinks.forEach((link) => (link.style.display = "block"));
 7 |     loggedOutLinks.forEach((link) => (link.style.display = "none"));
 8 |   } else {
 9 |     loggedInLinks.forEach((link) => (link.style.display = "none"));
10 |     loggedOutLinks.forEach((link) => (link.style.display = "block"));
11 |   }
12 | };


--------------------------------------------------------------------------------
/src/app/firebase.js:
--------------------------------------------------------------------------------
 1 | import { initializeApp } from "https://www.gstatic.com/firebasejs/9.10.0/firebase-app.js";
 2 | import { getAuth } from "https://www.gstatic.com/firebasejs/9.10.0/firebase-auth.js"
 3 | import { getFirestore } from "https://www.gstatic.com/firebasejs/9.10.0/firebase-firestore.js"
 4 | 
 5 | const firebaseConfig = {
 6 |   // Paste your firebase config here
 7 | };
 8 | 
 9 | // Initialize Firebase
10 | export const app = initializeApp(firebaseConfig);
11 | export const auth = getAuth(app)
12 | export const db = getFirestore(app)


--------------------------------------------------------------------------------
/src/app/postList.js:
--------------------------------------------------------------------------------
 1 | const postList = document.querySelector(".posts");
 2 | 
 3 | export const setupPosts = (data) => {
 4 |   if (data.length) {
 5 |     let html = "";
 6 |     data.forEach((doc) => {
 7 |       const post = doc.data();
 8 |       const li = `
 9 |       <li class="list-group-item list-group-item-action">
10 |         <h5>${post.title}</h5>
11 |         <p>${post.content}</p>
12 |       </li>
13 |     `;
14 |       html += li;
15 |     });
16 |     postList.innerHTML = html;
17 |   } else {
18 |     postList.innerHTML = '<h4 class="text-white">Login to See Posts</h4>';
19 |   }
20 | };


--------------------------------------------------------------------------------
/src/app/showMessage.js:
--------------------------------------------------------------------------------
 1 | export function showMessage(message, type = "success") {
 2 |   Toastify({
 3 |     text: message,
 4 |     duration: 3000,
 5 |     destination: "https://github.com/apvarun/toastify-js",
 6 |     newWindow: true,
 7 |     close: true,
 8 |     gravity: "bottom", // `top` or `bottom`
 9 |     position: "right", // `left`, `center` or `right`
10 |     stopOnFocus: true, // Prevents dismissing of toast on hover
11 |     style: {
12 |       background: type === "success" ? "green" : "red",
13 |     },
14 |     // onClick: function () { } // Callback after click
15 |   }).showToast();
16 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "firebase-auth-example",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/FaztWeb/firebase-auth-example.git"
12 |   },
13 |   "keywords": [],
14 |   "author": "",
15 |   "license": "ISC",
16 |   "bugs": {
17 |     "url": "https://github.com/FaztWeb/firebase-auth-example/issues"
18 |   },
19 |   "homepage": "https://github.com/FaztWeb/firebase-auth-example#readme",
20 |   "dependencies": {
21 |     "firebase-tools": "^11.11.0"
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/src/app/githubLogin.js:
--------------------------------------------------------------------------------
 1 | import { GithubAuthProvider, signInWithPopup } from "https://www.gstatic.com/firebasejs/9.10.0/firebase-auth.js"
 2 | import { auth } from "./firebase.js";
 3 | import { showMessage } from "./showMessage.js";
 4 | 
 5 | const githubButton= document.querySelector("#githubLogin");
 6 | 
 7 | githubButton.addEventListener("click", async (e) => {
 8 |   e.preventDefault();
 9 | 
10 |   const provider = new GithubAuthProvider();
11 |   try {
12 |     const credentials = await signInWithPopup(auth, provider)
13 |     console.log(credentials);
14 |     console.log("google sign in");
15 |     
16 |     // Close the login modal
17 |     const modalInstance = bootstrap.Modal.getInstance(githubButton.closest('.modal'));
18 |     modalInstance.hide();
19 | 
20 |     // show welcome message
21 |     showMessage("Welcome " + credentials.user.displayName);
22 |   } catch (error) {
23 |     console.log(error);
24 |   }
25 | });


--------------------------------------------------------------------------------
/src/app/facebookLogin.js:
--------------------------------------------------------------------------------
 1 | import { FacebookAuthProvider, signInWithPopup } from "https://www.gstatic.com/firebasejs/9.10.0/firebase-auth.js"
 2 | import { auth } from "./firebase.js";
 3 | import { showMessage } from "./showMessage.js";
 4 | 
 5 | const facebookButton = document.querySelector('#facebookLogin');
 6 | 
 7 | facebookButton.addEventListener('click', async e => {
 8 |   e.preventDefault();
 9 | 
10 |   const provider = new FacebookAuthProvider();
11 | 
12 |   try {
13 |     const credentials = await signInWithPopup(auth, provider)
14 |     console.log(credentials);
15 |     console.log("facebook sign in");
16 |     
17 |     // Close the login modal
18 |     const modal = bootstrap.Modal.getInstance(facebookButton.closest('.modal'));
19 |     modal.hide();
20 | 
21 |     // show welcome message
22 |     showMessage("Welcome" + credentials.user.email);
23 |   } catch (error) {
24 |     console.log(error);
25 |   }
26 | 
27 | })


--------------------------------------------------------------------------------
/src/app/googleLogin.js:
--------------------------------------------------------------------------------
 1 | import { GoogleAuthProvider, signInWithPopup } from "https://www.gstatic.com/firebasejs/9.10.0/firebase-auth.js"
 2 | import { auth } from "./firebase.js";
 3 | import { showMessage } from "./showMessage.js";
 4 | 
 5 | const googleButton = document.querySelector("#googleLogin");
 6 | 
 7 | googleButton.addEventListener("click", async (e) => {
 8 |   e.preventDefault();
 9 | 
10 |   const provider = new GoogleAuthProvider();
11 |   try {
12 |     const credentials = await signInWithPopup(auth, provider)
13 |     console.log(credentials);
14 |     console.log("google sign in");
15 |     
16 |     // Close the login modal
17 |     const modalInstance = bootstrap.Modal.getInstance(googleButton.closest('.modal'));
18 |     modalInstance.hide();
19 | 
20 |     // show welcome message
21 |     showMessage("Welcome " + credentials.user.displayName);
22 |   } catch (error) {
23 |     console.log(error);
24 |   }
25 | });


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import { onAuthStateChanged } from "https://www.gstatic.com/firebasejs/9.10.0/firebase-auth.js"
 2 | import { getDocs, collection } from "https://www.gstatic.com/firebasejs/9.10.0/firebase-firestore.js"
 3 | import { auth, db } from "./app/firebase.js";
 4 | import { loginCheck } from "./app/loginCheck.js";
 5 | import { setupPosts } from "./app/postList.js";
 6 | 
 7 | import './app/signupForm.js'
 8 | import './app/signinForm.js'
 9 | import './app/googleLogin.js'
10 | import './app/facebookLogin.js'
11 | import './app/githubLogin.js'
12 | import './app/logout.js'
13 | import './app/postList.js'
14 | 
15 | // list for auth state changes
16 | onAuthStateChanged(auth, async (user) => {
17 |   if (user) {
18 |     loginCheck(user);
19 |     try {
20 |       const querySnapshot = await getDocs(collection(db, "posts"));
21 |       setupPosts(querySnapshot.docs);
22 |     } catch (error) {
23 |       console.log(error)
24 |     }
25 |   } else {
26 |     setupPosts([]);
27 |     loginCheck(user);
28 |   }
29 | });


--------------------------------------------------------------------------------
/src/app/signinForm.js:
--------------------------------------------------------------------------------
 1 | import { signInWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/9.10.0/firebase-auth.js"
 2 | import { auth } from "./firebase.js";
 3 | import { showMessage } from "./showMessage.js";
 4 | 
 5 | const signInForm = document.querySelector("#login-form");
 6 | 
 7 | signInForm.addEventListener("submit", async (e) => {
 8 |   e.preventDefault();
 9 |   const email = signInForm["login-email"].value;
10 |   const password = signInForm["login-password"].value;
11 | 
12 |   try {
13 |     const userCredentials = await signInWithEmailAndPassword(auth, email, password)
14 |     console.log(userCredentials)
15 | 
16 |     // Close the login modal
17 |     const modal = bootstrap.Modal.getInstance(signInForm.closest('.modal'));
18 |     modal.hide();
19 | 
20 |     // reset the form
21 |     signInForm.reset();
22 | 
23 |     // show welcome message
24 |     showMessage("Welcome" + userCredentials.user.email);
25 |   } catch (error) {
26 |     if (error.code === 'auth/wrong-password') {
27 |       showMessage("Wrong password", "error")
28 |     } else if (error.code === 'auth/user-not-found') {
29 |       showMessage("User not found", "error")
30 |     } else {
31 |       showMessage("Something went wrong", "error")
32 |     }
33 |   }
34 | });


--------------------------------------------------------------------------------
/src/app/signupForm.js:
--------------------------------------------------------------------------------
 1 | import { createUserWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/9.10.0/firebase-auth.js"
 2 | import { auth } from "./firebase.js";
 3 | import { showMessage } from "./showMessage.js";
 4 | 
 5 | const signUpForm = document.querySelector("#signup-form");
 6 | 
 7 | signUpForm.addEventListener("submit", async (e) => {
 8 |   e.preventDefault();
 9 |   const email = signUpForm["signup-email"].value;
10 |   const password = signUpForm["signup-password"].value;
11 | 
12 |   try {
13 |     const userCredential = await createUserWithEmailAndPassword(auth, email, password)
14 |     console.log(userCredential)
15 | 
16 |     // Close the signup modal
17 |     const signupModal = document.querySelector('#signupModal');
18 |     const modal = bootstrap.Modal.getInstance(signupModal);
19 |     modal.hide();
20 | 
21 |     // reset the form
22 |     signUpForm.reset();
23 | 
24 |     // show welcome message
25 |     showMessage("Welcome" + userCredentials.user.email);
26 | 
27 |   } catch (error) {
28 |     if (error.code === 'auth/email-already-in-use') {
29 |       showMessage("Email already in use", "error")
30 |     } else if (error.code === 'auth/invalid-email') {
31 |       showMessage("Invalid email", "error")
32 |     } else if (error.code === 'auth/weak-password') {
33 |       showMessage("Weak password", "error")
34 |     } else if (error.code) {
35 |       showMessage("Something went wrong", "error")
36 |     }
37 |   }
38 | 
39 | });


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 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
67 | 


--------------------------------------------------------------------------------
/src/404.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <title>Page Not Found</title>
 7 | 
 8 |     <style media="screen">
 9 |       body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
10 |       #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px 16px; border-radius: 3px; }
11 |       #message h3 { color: #888; font-weight: normal; font-size: 16px; margin: 16px 0 12px; }
12 |       #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
13 |       #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
14 |       #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
15 |       #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
16 |       #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
17 |       #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
18 |       @media (max-width: 600px) {
19 |         body, #message { margin-top: 0; background: white; box-shadow: none; }
20 |         body { border-top: 16px solid #ffa100; }
21 |       }
22 |     </style>
23 |   </head>
24 |   <body>
25 |     <div id="message">
26 |       <h2>404</h2>
27 |       <h1>Page Not Found</h1>
28 |       <p>The specified file was not found on this website. Please check the URL for mistakes and try again.</p>
29 |       <h3>Why am I seeing this?</h3>
30 |       <p>This page was generated by the Firebase Command-Line Interface. To modify it, edit the <code>404.html</code> file in your project's configured <code>public</code> directory.</p>
31 |     </div>
32 |   </body>
33 | </html>
34 | 


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <title>Firebase Auth Example</title>
  8 |   <!-- BOOSTRAP CSS -->
  9 |   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css">
 10 |   <!-- Toastify CSS -->
 11 |   <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
 12 |   <link rel="stylesheet" href="./main.css">
 13 | </head>
 14 | 
 15 | <body>
 16 | 
 17 |   <!-- Navbar -->
 18 |   <nav class="navbar navbar-expand-lg bg-dark navbar-dark">
 19 |     <div class="container">
 20 |       <a class="navbar-brand" href="/">FireApp</a>
 21 |       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
 22 |         aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
 23 |         <span class="navbar-toggler-icon"></span>
 24 |       </button>
 25 |       <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
 26 |         <div class="navbar-nav ms-auto">
 27 |           <a class="nav-link logged-out" href="#" data-bs-toggle="modal" data-bs-target="#signinModal">Signin</a>
 28 |           <a class="nav-link logged-out" href="#" data-bs-toggle="modal" data-bs-target="#signupModal">Signup</a>
 29 |           <a class="nav-link logged-in" href="#" id="logout">Logout</a>
 30 |         </div>
 31 |       </div>
 32 |     </div>
 33 |   </nav>
 34 | 
 35 |   <div class="container p-4">
 36 |     <div class="row">
 37 |       <div class="col-md-6 offset-md-3">
 38 |         <ul class="list-group posts">
 39 |         </ul>
 40 |       </div>
 41 |     </div>
 42 |   </div>
 43 | 
 44 |   <!-- Modal -->
 45 |   <div class="modal fade" id="signupModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
 46 |     aria-hidden="true">
 47 |     <div class="modal-dialog">
 48 |       <div class="modal-content bg-dark">
 49 |         <div class="modal-header">
 50 |           <h3>SignUp</h3>
 51 |           <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
 52 |         </div>
 53 |         <div class="modal-body p-5">
 54 |           <form id="signup-form">
 55 | 
 56 |             <label for="email">Email:</label>
 57 |             <input type="text" id="signup-email" class="form-control mb-3" placeholder="Title" required>
 58 | 
 59 |             <label for="password">Password:</label>
 60 |             <input type="password" id="signup-password" class="form-control mb-3" placeholder="Password" required>
 61 | 
 62 |             <button type="submit" class="btn btn-primary">Save changes</button>
 63 |           </form>
 64 |         </div>
 65 |       </div>
 66 |     </div>
 67 |   </div>
 68 | 
 69 |   <div class="modal fade" id="signinModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalSignin"
 70 |     aria-hidden="true">
 71 |     <div class="modal-dialog">
 72 |       <div class="modal-content">
 73 |         <div class="modal-header">
 74 |           <h3>SignIn</h3>
 75 |           <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
 76 |         </div>
 77 |         <div class="modal-body">
 78 |           <form id="login-form">
 79 |             <label for="email">Email</label>
 80 |             <input type="text" id="login-email" class="form-control mb-3" placeholder="Title" required>
 81 |             <label for="password">Password:</label>
 82 |             <input type="password" id="login-password" class="form-control mb-3" placeholder="Password" required>
 83 | 
 84 |             <button type="submit" class="btn btn-success w-100 mb-4">Login</button>
 85 | 
 86 |             <button type="button" class="btn btn-info" id="googleLogin">Google</button>
 87 |             <button type="button" class="btn btn-primary" id="facebookLogin">Facebook</button>
 88 |             <button type="button" class="btn btn-dark" id="githubLogin">Github</button>
 89 |           </form>
 90 |         </div>
 91 |       </div>
 92 |     </div>
 93 |   </div>
 94 | 
 95 |   <!-- SCRIPTS -->
 96 |   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"></script>
 97 |   <!-- Toastify js -->
 98 |   <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
 99 |   <script src="./main.js" type="module"></script>
100 | </body>
101 | 
102 | </html>


--------------------------------------------------------------------------------