Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/markhilton/firebase-vuetify-auth
A package providing user authentication against Firebase auth API for VUE applications using Vuetify Material Design layout.
https://github.com/markhilton/firebase-vuetify-auth
Last synced: about 1 month ago
JSON representation
A package providing user authentication against Firebase auth API for VUE applications using Vuetify Material Design layout.
- Host: GitHub
- URL: https://github.com/markhilton/firebase-vuetify-auth
- Owner: markhilton
- License: mit
- Created: 2020-06-01T12:47:21.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-11-18T14:03:31.000Z (about 2 months ago)
- Last Synced: 2024-11-18T20:28:44.809Z (about 2 months ago)
- Language: Vue
- Size: 3.29 MB
- Stars: 9
- Watchers: 2
- Forks: 5
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Firebase Vuetify Auth
Firebase Vuetify Auth is a package providing user authentication against Firebase auth API for VUE application using Vuetify Material Design layout.
## Functionality:
- User authentication - app Sign In
- User registration - app Register
- Email verification for new accounts (required to gain access to the app)
- 3rd party authentication provider integration (Google, Facebook, Phone text message)
## Requirements
Current master branch supports Vue 3 application. For Vue 2 please see vue2 branch.
This package assumes your VUE project is already integrated with Firebase & Vuetify. Example integration:
The Firebase config file, example: `./src/middleware/firebase` is created to initiate Firebase Modular v9 SDK
example:
```javascript
import { initializeApp } from "firebase/app"
const config = {
appId: process.env.VUE_APP_FIREBASE_APP_ID,
apiKey: process.env.VUE_APP_FIREBASE_APIKEY,
authDomain: process.env.VUE_APP_FIREBASE_AUTH,
databaseURL: process.env.VUE_APP_FIREBASE_DATABASE,
projectId: process.env.VUE_APP_FIREBASE_PROJECT,
storageBucket: process.env.VUE_APP_FIREBASE_STORAGE,
messagingSenderId: process.env.VUE_APP_FIREBASE_MESSAGING,
measurementId: process.env.VUE_APP_FIREBASE_MEASUREMENT_ID,
}
const app = initializeApp(config)
export default app
```
Additionally, please ensure that you have installed the mdi/fonts package.
example of integration:
```javascript
import "@mdi/font/css/materialdesignicons.css"
```
add this into your vuetify.js
## Install
```bash
npm i @nerd305/firebase-vuetify-auth
```
## Setup
#### STEP 1: Update your `main.js` app file
This example assumes that you're using `vue-router` and `pinia` packages with your app, so we initialize VUE class by passing in `router`, `store` & `vuetify` objects.
```javascript
import { createApp } from "vue"
import { createPinia } from "pinia"
import App from "@/App"
import router from "@/router"
import vuetify from "@/plugins/vuetify"
import AuthGuard from "@nerd305/firebase-vuetify-auth"
import firebase from "@/middleware/firebase"
import { getAuth } from "firebase/auth"
const authGuardSettings = {
debug: true, // enable debug messages in console log
session: "local", // session persistance
router, // routes
firebase, // pass on firebase middleware app init
saml: false, // allow authentication with SAML
saml_text: "Login with OKTA", // text for large login button
saml_provider_id: "saml.okta", // firebase provider ID for SAML
email: true, // allow authentication with email
phone: false, // allow authentication with phone
google: true, // allow authentication with gmail account
facebook: false, // allow authentication with facebook account
verification: false, // require user email to be verified before granting access
registration: true, // allow new user registrations
}
// reload VUE app on Firebase auth state change
const app = createApp(App)
app.config.productionTip = false
app.use(createPinia())
app.use(router)
app.use(vuetify)
app.use(AuthGuard, authGuardSettings)
app.mount("#app")
```
#### STEP 2: Add AuthenticationGuard to your App.vue template
Update your `App.vue` to include global `AuthGuard` component.
This component will monitor Firebase user auth state and open a fullscreen modal dialog with login screen if user is not autthenticated.
```html
[ ... ]
```
#### STEP 3: Update vue router to protect desired routes
Example of `router.js` implementation.
```js
import { createWebHistory, createRouter } from "vue-router"
const router = createRouter({
history: createWebHistory(),
routes: [
{
name: "Home",
path: "/",
component: () => import("@/views/HomePage.vue"),
meta: { requiresAuth: true },
},
{
name: "Public",
path: "/public",
component: () => import("@/views/PublicRoute.vue"),
},
{
name: "Protected",
path: "/protected",
meta: { requiresAuth: true },
component: () => import("@/views/ProtectedRoute.vue"),
},
],
})
router.beforeEach(guard)
export default router
```
add `meta: { requiresAuth: true }` for any route that would require authentication.
### That's it!
After following implementation instruction requests to protected views, should render a login / registration view, unless user is already logged into the application.
For more usage examples (how to log in/sign out and so on) please check the package source code
## Available settings
| Prop | Type | Default | Description |
| ------------ | ---------------- | --------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
| router | Object | null | VUE router |
| firebase | Object | null | Firebase middleware - initialized app |
| session | String | "local" | Firebase auth state session persistence, see: https://firebase.google.com/docs/auth/web/auth-state-persistence |
| verification | Boolean or array | true | require email verification to sign in for all accounts or for specific domains in array |
| registration | Boolean | true | allow new user registrations |
| phone | Boolean | true | allow users to singin using phone number |
| google | Boolean | true | allow users to singin using gmail |
| facebook | Boolean | true | allow users to singin using facebook |
| title | String | "Authenticate" | authentication prompt title |
| subtitle | String | "Firebase Vuetify Authentication NPM package" | authentication prompt subtitle |
| icon | String | "mdi-brightness-7" | authentication prompt icon |
| iconColor | String | "orange" | authentication prompt icon |