Login/register with firebase Vue JS #STEP (registration)

Firstly, I will show the structure of the SRC folder in my Vue JS project.

.
├── src
│   └── assets
│       └── images
|           └── imagem_logo_google.png
│   └── module
│       └── login
|           └── component
|               └── formLogin.vue
|           └── controller
|               └── loginController.js
|           └── view
|               └── login.vue
│       └── register
|           └── component
|               └── formRegister.vue
|           └── controller
|               └── registerController.js
|           └── view
|               └── register.vue
│   └── router
│       └── index.js
│   └── App.vue
│   └── main.js

Let's explain:

• The assets folder is where the images of my project are located, in this case, it is where I placed the image of the Google logo so that we can later use it to implement the Google login option;

• The module folder is where I have the project modules, in this case I separated each module with folders and within each folder I created other sub-folders with the files for better organization;

  • Within the login and register folders I created the sub-folders:

  component: where is the HTML of the screens;
  controller: where the functions that we are going to perform on the screen will be located;
  view: where I call the screen created in the component and assign the controller prop to it.

• The router folder has the routes for our project;

• The App.vue file is just calling the project routes and defining some default CSS styles on all screens;

• Finally, the main.js file which is where I call the SDK settings that firebase provided us and some other imports that Vue JS itself creates.

---

Initially, before anything else, let's install the libs that we are going to use, in this case vue-router and firebase by running the commands below in the terminal:

$ npm install vue-router

After

$ npm install firebase

---

Now, let's start by adding the SDK that firebase provided us in the main.js file, so let's pay attention to this structure below:

.
├── src
│   └── main.js

import { createApp } from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import { initializeApp } from 'firebase/app'

const firebaseConfig = {
  apiKey: "AIzaSyA_Bq3nqLfRUWXsqtkpzietY5eu0ewFtzA",
  authDomain: "login-app-8c263.firebaseapp.com",
  projectId: "login-app-8c263",
  storageBucket: "login-app-8c263.appspot.com",
  messagingSenderId: "854129813359",
  appId: "1:854129813359:web:02f776146a0c34be906a9a"
}

initializeApp(firebaseConfig)

const app = createApp(App)

app.use(vuetify).mount('#app')

Note that I'm using Vue with Vuetify to make it easier to create components, but you can use Tailwind or any other framework you want.

---

Now, let's create the project route and configure it in the App.vue file, so let's focus on this structure below.

.
├── src
│   └── router
│       └── index.js
│   └── App.vue

First, let's go to the index.js file and add the following:

.
├── src
│   └── assets
│       └── images
|           └── imagem_logo_google.png
│   └── module
│       └── login
|           └── component
|               └── formLogin.vue
|           └── controller
|               └── loginController.js
|           └── view
|               └── login.vue
│       └── register
|           └── component
|               └── formRegister.vue
|           └── controller
|               └── registerController.js
|           └── view
|               └── register.vue
│   └── router
│       └── index.js
│   └── App.vue
│   └── main.js

Linha	Explicação
1	Importa as funções createRouter e createWebHistory da biblioteca vue-router. createRouter é usado para configurar o roteador, e createWebHistory define o modo de histórico do navegador para gerenciar URLs de forma limpa (sem o símbolo #).
2	Importa o componente Register, que representa a página de registro, localizado na pasta especificada. Este componente será carregado quando o usuário acessar a rota correspondente.
4/13	Cria uma instância do roteador (router) com createRouter. Aqui, history define o modo de histórico (createWebHistory) e routes define as rotas disponíveis. A rota { path: '/cadastro', name: 'Register', component: Register } configura o caminho /cadastro para carregar o componente Register. name é um nome opcional para a rota, que facilita a navegação programática.
15	Exporta a rota como o módulo padrão, para que ele possa ser importado e usado no aplicativo Vue.

Now let's call the route in the App.vue file as follows:

$ npm install vue-router

Finally, let's add the route to our main.js file so that the application can use it.

$ npm install firebase

---

Now, let's move on to creating our actual registration component, its functions and its call, so let's focus on this structure.

.
├── src
│   └── main.js

File formRegister.vue.

import { createApp } from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import { initializeApp } from 'firebase/app'

const firebaseConfig = {
  apiKey: "AIzaSyA_Bq3nqLfRUWXsqtkpzietY5eu0ewFtzA",
  authDomain: "login-app-8c263.firebaseapp.com",
  projectId: "login-app-8c263",
  storageBucket: "login-app-8c263.appspot.com",
  messagingSenderId: "854129813359",
  appId: "1:854129813359:web:02f776146a0c34be906a9a"
}

initializeApp(firebaseConfig)

const app = createApp(App)

app.use(vuetify).mount('#app')

registerController.js file.

.
├── src
│   └── router
│       └── index.js
│   └── App.vue

Register.vue file.

1  | import { createRouter, createWebHistory } from 'vue-router'
2  | import Register from '@/module/register/view/register.vue'
3  |
4  | const router = createRouter({
5  | history: createWebHistory(),
6  | routes: [
7  |   {
8  |     path: '/cadastro',
9  |     name: 'Register',
10 |     component: Register
11 |   }
12 | ]
13 | })
14 |
15 | export default router

So, so far we have already added the code to integrate the SDK in firebase to our project in the main.js file, configured the routes in router/index.js and called the route in main.js and App.vue, we created the registration screen component in the formRegister.vue file, we created the functions in the registerController.js file and called the screen and the controller prop in the register.vue file, in theory, now, if you access your application in /register already The form should appear as below:

The above is the detailed content of Login/register with firebase Vue JS #STEP (registration). For more information, please follow other related articles on the PHP Chinese website!