├── .gitignore
├── README.md
├── app.vue
├── components
    └── AuthFirebase.vue
├── composables
    ├── useFirebase.ts
    └── useStates.ts
├── nuxt.config.ts
├── package-lock.json
├── package.json
├── pages
    ├── firebase.vue
    ├── index.vue
    └── secret.vue
├── plugins
    ├── auth.ts
    └── firebaseAuth.client.ts
├── server
    ├── api
    │   ├── auth.ts
    │   ├── me.ts
    │   └── secret.ts
    └── middleware
    │   └── user-middleware.ts
└── tsconfig.json


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | *.log
3 | .nuxt
4 | nuxt.d.ts
5 | .output
6 | .env


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Nuxt 3 / Firebase Auth Starter
 2 | 
 3 | Nuxt 3 Getting Started
 4 | https://v3.nuxtjs.org/getting-started/introduction
 5 | 
 6 | Get Started with Firebase Authentication on Websites 
 7 | https://firebase.google.com/docs/auth/web/start
 8 | 
 9 | ## Setup
10 | 
11 | Make sure to install the dependencies
12 | 
13 | ```
14 | npm install
15 | ```
16 | 
17 | ## Development
18 | 
19 | Start the development server on http://localhost:3000
20 | 
21 | ```
22 | npm run dev
23 | ```
24 | 
25 | ## Production
26 | 
27 | Build the application for production:
28 | 
29 | ```
30 | npm run build
31 | ```
32 | 


--------------------------------------------------------------------------------
/app.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="container mt-6" v-if="!firebaseUser">
 4 |       <div class="column is-half is-offset-one-quarter">
 5 |         <AuthFirebase
 6 |           class="box px-5 py-5 mx-4"
 7 |           title="Register"
 8 |           @submit="register"
 9 |           :form="registerForm"
10 |           :message="registerMessage"
11 |           v-if="showRegisterForm"
12 |         />
13 |         <AuthFirebase
14 |           class="box px-5 py-5 mx-4"
15 |           title="Sign in"
16 |           @submit="signin"
17 |           :form="signinForm"
18 |           v-if="!firebaseUser && !showRegisterForm"
19 |         />
20 |       </div>
21 |       <div class="level">
22 |         <div class="level-item has-text-centered">
23 |           <button class="button" @click="showRegisterForm = !showRegisterForm">
24 |             {{ toggleButtonText }}
25 |           </button>
26 |         </div>
27 |       </div>
28 |     </div>
29 |     <NuxtPage v-if="firebaseUser" />
30 |   </div>
31 | </template>
32 | 
33 | <script setup>
34 | const firebaseUser = useFirebaseUser();
35 | const showRegisterForm = ref(false);
36 | const registerMessage = ref();
37 | const registerForm = ref({ email: "", password: "" });
38 | const signinForm = ref({ email: "", password: "" });
39 | 
40 | const toggleButtonText = computed(() => {
41 |   return showRegisterForm.value ? "Sign in" : "Register";
42 | });
43 | 
44 | const signin = () => {
45 |   signInUser(signinForm.value.email, signinForm.value.password);
46 |   signinForm.value = { email: "", password: "" };
47 | };
48 | 
49 | const register = async () => {
50 |   console.log(registerForm.value);
51 |   const credentials = await createUser(
52 |     registerForm.value.email,
53 |     registerForm.value.password
54 |   );
55 |   registerForm.value = { email: "", password: "" };
56 | 
57 |   if (credentials) {
58 |     registerMessage.value = `Successfully registered: ${credentials.user.email}`;
59 |     setTimeout(() => {
60 |       registerMessage.value = "";
61 |     }, 3000);
62 |   }
63 | };
64 | </script>
65 | 
66 | <style>
67 | @import "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css";
68 | @import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css";
69 | </style>
70 | 


--------------------------------------------------------------------------------
/components/AuthFirebase.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h2 class="mb-5 title is-4 has-text-black">{{ title }}</h2>
 4 |     <div class="field">
 5 |       <label class="label">Email</label>
 6 |       <div class="control has-icons-left has-icons-right">
 7 |         <input
 8 |           v-model="form.email"
 9 |           class="input"
10 |           type="email"
11 |           placeholder="john@gmail.com"
12 |           autocomplete="false"
13 |         />
14 |         <span class="icon is-small is-left">
15 |           <i class="fas fa-envelope"></i>
16 |         </span>
17 |       </div>
18 |     </div>
19 |     <div class="field">
20 |       <div>
21 |         <label class="label">Password</label>
22 |         <div class="control">
23 |           <input
24 |             v-model="form.password"
25 |             class="input"
26 |             type="password"
27 |             placeholder="*************"
28 |             autocomplete="false"
29 |           />
30 |         </div>
31 |       </div>
32 |     </div>
33 | 
34 |     <div v-if="message" class="has-text-success p-3">
35 |       {{ message }}
36 |     </div>
37 | 
38 |     <button class="button is-success" @click="$emit('submit')">Submit</button>
39 |   </div>
40 | </template>
41 | 
42 | <script setup>
43 | const props = defineProps({
44 |   form: Object,
45 |   title: String,
46 |   message: String
47 | });
48 | </script>
49 | 
50 | <style scoped></style>


--------------------------------------------------------------------------------
/composables/useFirebase.ts:
--------------------------------------------------------------------------------
 1 | //https://firebase.google.com/docs/auth/web/start
 2 | 
 3 | import {
 4 |   getAuth,
 5 |   createUserWithEmailAndPassword,
 6 |   signInWithEmailAndPassword,
 7 |   onAuthStateChanged,
 8 | } from "firebase/auth";
 9 | 
10 | export const createUser = async (email, password) => {
11 |   const auth = getAuth();
12 |   const credentials = await createUserWithEmailAndPassword(
13 |     auth,
14 |     email,
15 |     password
16 |   ).catch((error) => {
17 |     const errorCode = error.code;
18 |     const errorMessage = error.message;
19 |   });
20 |   return credentials;
21 | };
22 | 
23 | export const signInUser = async (email, password) => {
24 |   const auth = getAuth();
25 |   const credentials = await signInWithEmailAndPassword(
26 |     auth,
27 |     email,
28 |     password
29 |   ).catch((error) => {
30 |     const errorCode = error.code;
31 |     const errorMessage = error.message;
32 |   });
33 |   return credentials;
34 | };
35 | 
36 | export const initUser = async () => {
37 |   const auth = getAuth();
38 |   const firebaseUser = useFirebaseUser();
39 |   firebaseUser.value = auth.currentUser;
40 | 
41 |   const userCookie = useCookie("userCookie");
42 | 
43 |   const router = useRouter();
44 | 
45 |   onAuthStateChanged(auth, (user) => {
46 |     if (user) {
47 |       // User is signed in, see docs for a list of available properties
48 |       // https://firebase.google.com/docs/reference/js/firebase.User
49 |     } else {
50 |       //if signed out
51 |       router.push("/");
52 |     }
53 | 
54 |     firebaseUser.value = user;
55 | 
56 |     // @ts-ignore
57 |     userCookie.value = user; //ignore error because nuxt will serialize to json
58 | 
59 |     $fetch("/api/auth", {
60 |       method: "POST",
61 |       body: { user },
62 |     });
63 |   });
64 | };
65 | 
66 | export const signOutUser = async () => {
67 |   const auth = getAuth();
68 |   const result = await auth.signOut();
69 |   return result;
70 | };
71 | 


--------------------------------------------------------------------------------
/composables/useStates.ts:
--------------------------------------------------------------------------------
1 | export const useFirebaseUser = () => useState("firebaseUser", () => null);
2 | 


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineNuxtConfig } from "nuxt3";
 2 | 
 3 | // https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
 4 | export default defineNuxtConfig({
 5 |   publicRuntimeConfig: {
 6 |     FIREBASE_API_KEY: process.env.FIREBASE_API_KEY,
 7 |   },
 8 |   privateRuntimeConfig: {
 9 |     FIREBASE_API_KEY: process.env.FIREBASE_API_KEY,
10 |   },
11 | });
12 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "scripts": {
 4 |     "dev": "nuxi dev",
 5 |     "build": "nuxi build",
 6 |     "start": "node .output/server/index.mjs"
 7 |   },
 8 |   "devDependencies": {
 9 |     "nuxt3": "latest"
10 |   },
11 |   "dependencies": {
12 |     "bulma": "^0.9.3",
13 |     "firebase": "^9.6.8"
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/pages/firebase.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <section
 4 |       class="hero is-grey is-fullheight is-justify-content-flex-start"
 5 |     >
 6 |       <div class="has-text-centered mt-6">
 7 |         <p class="title">Firebase/Nuxt3 Auth</p>
 8 |         <p class="subtitle">https://nuxt3-firebase-razorcx.netlify.app/</p>
 9 |       </div>
10 | 
11 |       <div class="section">
12 |         <div class="columns">
13 |           <div class="column is-4 is-offset-2">
14 |             <AuthFirebase
15 |               class="box px-5 py-5 mx-4"
16 |               title="Register"
17 |               @submit="register"
18 |               :form="registerForm"
19 |               :message="registerMessage"
20 |             />
21 |             <AuthFirebase
22 |               class="box px-5 py-5 mx-4"
23 |               title="Sign in"
24 |               @submit="signin"
25 |               :form="signinForm"
26 |             />
27 |           </div>
28 |           <div class="column is-4" v-if="firebaseUser">
29 |             <p class="subtitle">Firebase Auth Current User</p>
30 |             <pre>{{ firebaseUser }}</pre>
31 |             <button class="button mt-4" @click="signOutUser">Sign Out</button>
32 |           </div>
33 |           <div class="column is-4 has-text-centered" v-else>
34 |             <p>User is signed out</p>
35 |           </div>
36 |         </div>
37 |       </div>
38 |     </section>
39 |   </div>
40 | </template>
41 | 
42 | <script setup>
43 | import { signOutUser } from "../composables/useFirebase";
44 | 
45 | const registerForm = ref({ email: "", password: "" });
46 | const signinForm = ref({ email: "", password: "" });
47 | const firebaseUser = useFirebaseUser();
48 | const registerMessage = ref();
49 | 
50 | const signin = () => {
51 |   console.log(signinForm.value);
52 |   signInUser(signinForm.value.email, signinForm.value.password);
53 |   signinForm.value = { email: "", password: "" };
54 | };
55 | 
56 | const register = async () => {
57 |   console.log(registerForm.value);
58 |   const credentials = await createUser(registerForm.value.email, registerForm.value.password);
59 |   registerForm.value = { email: "", password: "" };
60 | 
61 |   if(credentials) {
62 |     registerMessage.value = `Successfully registered: ${credentials.user.email}`
63 |     setTimeout(() => {
64 |       registerMessage.value = ""
65 |     }, 3000);
66 |   }
67 | };
68 | </script>
69 | 
70 | <style></style>


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <p><NuxtLink to="/secret">Go to Secret Page</NuxtLink></p>
 4 |     <button class="button" @click="signOut" v-if="firebaseUser">Sign out</button>
 5 |     <div v-if="firebaseUser">
 6 |       <client-only>
 7 |         <pre
 8 |           >{{ firebaseUser }}
 9 |     </pre
10 |         >
11 |       </client-only>
12 |     </div>
13 |     <div v-else>User is signed out</div>
14 |   </div>
15 | </template>
16 | 
17 | <script setup>
18 | const firebaseUser = useFirebaseUser();
19 | 
20 | const signOut = async () => {
21 |   await signOutUser();
22 | };
23 | 
24 | </script>
25 | 
26 | <style>
27 | </style>
28 | 


--------------------------------------------------------------------------------
/pages/secret.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div>Secret</div>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script setup>
 8 | definePageMeta({
 9 |   middleware: ["auth"],
10 | });
11 | 
12 | const firebaseUser = useFirebaseUser();
13 | </script>
14 | 
15 | <style></style>
16 | 


--------------------------------------------------------------------------------
/plugins/auth.ts:
--------------------------------------------------------------------------------
 1 | export default defineNuxtPlugin(() => {
 2 |     addRouteMiddleware('auth', () => {
 3 |         const { $auth } = useNuxtApp()
 4 | 
 5 |         console.log($auth?.currentUser)
 6 | 
 7 |         if(!$auth?.currentUser?.uid) {
 8 |             return navigateTo('/')
 9 |         }
10 |     })
11 |   })


--------------------------------------------------------------------------------
/plugins/firebaseAuth.client.ts:
--------------------------------------------------------------------------------
 1 | import { initializeApp } from "firebase/app";
 2 | import {
 3 |   getAuth,
 4 | } from "firebase/auth";
 5 | 
 6 | export default defineNuxtPlugin((nuxtApp) => {
 7 | 
 8 |   const config = useRuntimeConfig();
 9 | 
10 |   const firebaseConfig = {
11 |     apiKey: config.FIREBASE_API_KEY,
12 |   };
13 | 
14 |   // Initialize Firebase
15 |   const app = initializeApp(firebaseConfig);
16 | 
17 |   initUser();
18 | 
19 |   const auth = getAuth();
20 | 
21 |   nuxtApp.vueApp.provide('auth', auth);
22 |   nuxtApp.provide('auth', auth);
23 | 
24 | });
25 | 


--------------------------------------------------------------------------------
/server/api/auth.ts:
--------------------------------------------------------------------------------
 1 | import type { IncomingMessage, ServerResponse } from "http";
 2 | import { useBody } from 'h3'
 3 | 
 4 | export default async (req: IncomingMessage, res: ServerResponse) => {
 5 | 
 6 |     if(req.method !== 'POST') return 'Must be post request'
 7 | 
 8 |     const { user } = await useBody(req) // only for POST request
 9 |     
10 |     // @ts-ignore
11 |     req.user = user;
12 | 
13 |     return { updated: true }
14 | };
15 | 


--------------------------------------------------------------------------------
/server/api/me.ts:
--------------------------------------------------------------------------------
 1 | import type { IncomingMessage, ServerResponse } from "http";
 2 | 
 3 | export default async (req: IncomingMessage, res: ServerResponse) => {
 4 |     
 5 |   // @ts-ignore
 6 |   const user = req.user;
 7 | 
 8 |   return user ? user : "User is signed out"
 9 | };
10 | 


--------------------------------------------------------------------------------
/server/api/secret.ts:
--------------------------------------------------------------------------------
 1 | import type { IncomingMessage, ServerResponse } from 'http'
 2 | 
 3 | export default async (req: IncomingMessage, res: ServerResponse) => {
 4 |   
 5 |   // @ts-ignore
 6 |   const user = req.user;
 7 | 
 8 |   if(user) {
 9 |     res.statusCode = 200
10 |     res.end('This is a top secret message from the API')
11 |   }
12 |   res.statusCode = 400
13 |   res.end('Must be signed in to read secret message')
14 | }


--------------------------------------------------------------------------------
/server/middleware/user-middleware.ts:
--------------------------------------------------------------------------------
 1 | import type { IncomingMessage, ServerResponse } from "http";
 2 | import { useCookie } from 'h3'
 3 | 
 4 | export default async (req: IncomingMessage, res: ServerResponse) => {
 5 |   const userCookie = useCookie(req, "userCookie");
 6 | 
 7 |   // @ts-ignore
 8 |   req.user = userCookie;
 9 | };
10 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   // https://v3.nuxtjs.org/concepts/typescript
3 |   "extends": "./.nuxt/tsconfig.json"
4 | }
5 | 


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