DEV Community: Jesus Guerrero

Introducing NeatCoach.ai: A running Plan Generator

Jesus Guerrero — Sat, 13 Apr 2024 11:59:55 +0000

This is a submission for the Cloudflare AI Challenge.

What I Built

It is a smart running coach. It will take a distance and minutes and Build well structured a training plan to run the entered distance in the desired minutes by the end of the last week of the training plan.

It will include speed work, tempo runs, and long runs in the plan as suggested by experts.

Additionally, you can save a plan and update your progress on them

Demo

https://neatcoach.pages.dev/

My Code

https://github.com/jesusantguerrero/running-coach

Journey

One of my main hobbies is running, I've been training and participating in local 5k races for a couple of years now and I am always looking for training plans to improve my record.

I went through the documentation on workers and pages and followed the instructions to do the project, which was pretty straightforward.

I went to the Model playground to test and modify the prompt until I got the output structure I had in mind.

What model do I use?

@cf/meta/llama-2-7b-chat-int8

What I learned?

To create Cloudflare Pages and Workers and to add bindings.
Even though I just used one I explored multiple models and tried its capabilities as well as how to use @cloudflare/ai package

What's next?

Allow users to store plans online using a DB
Train the AI to obtain better plans and take more user inputs like the current pace.
Add more widgets.

Thanks for reading and have a nice day.

App structure for big Vue projects

Jesus Guerrero — Fri, 09 Feb 2024 09:29:18 +0000

Choosing the right folder structure for a middle-size or big vue application might be intimidating and it's even more so when there are not many suggestions about the topic.

From 2017 to the moment of writing this post, I've been working on Vue applications for years from medium to large, established apps migrating to Vue to projects at the start of the process. From Nuxt, Laravel, and Vue SPA; here I will try my best to describe what I think has been the more intuitive easy to work and maintain folder structure.

The alternatives

First I want to talk about the alternatives considered.

Atomic Design

This is a very complete structure to define your building blocks according to their complexity, size, and how they interact with each other taking inspiration from one of the most well-structured systems the building blocks that compose our body

It is organized as follows:

Atoms
Molecules
Organisms

Those will help us to aisle functionality, making portable and reusable components even easier to unit test.

Then we used to group those organisms in templates to give them context and form in a layout and pages that are the single entry point of the content we show to our users.

Atoms
Molecules
Organisms
Templates
Pages

|_atoms/
   |__Input.vue
   |__Button.vue
   |__Label.vue
|_molecules
   |__FieldGroup.vue
|__organisms
   |__ContactForm

Benefits

Hint of complexity
You get a hint about the complexity of your components ahead. just by seeing where the component is placed: atoms are an indicator that the complexity is low and if are placed in organisms it is more complex.
Reusability
As you are working with building blocks they are like Legos that you can move around atoms can be part of many molecules and organisms
Testability
As components tend to be smaller and only do in isolation
Perfect match with design systems
If you are starting an application from 0 and need to build a consistent design system this is almost a no-brainer

Cons

When applied directly in an application structure you'll feel your components are all over the place.
If an atom is just used by one molecule or single organism you can't group them by context
Business logic

In my experience, we can get the most from Atomic Design when we are building a component library/Design System that will be the foundation of our system: Buttons, Input, Input groups, Form Wizards, SearchBars, Selectors, etc.

The Chosen One

When you are building an application you need as much context as possible in your project in the components that handle the business logic. For example, if I have a budget

|_Budget/
   |__Budget.vue
   |__BudgetCategory.vue
   |__BudgetCategoryItem.vue

The dev experience could improved greatly when building a new feature or removing or refactoring a component because it has much more context of where is used and its props (BudgetCategoryItem could have a BudgetCategory prop for example, and not a generic row prop) en what domain dominio y and which is its closest parent component.

Proposed structure:

|__ assets
|__ components/
|__ locales/
|__ plugins
    |__ i18n/index.ts
    |__ auth0/index.ts
    |__ loger/index.ts
    |__ axios/index.ts
|__ config/
|   |__ index.ts
|__ domains/
    |__ [domain]
       |__ api/  
       |__ models/
       |__ enums/
       |__ components/
           |__ RequestModal.vue
       |__ composables/
       |__ tests/unitTest.ts 
|__ pages
|   |__ auth/
|       |__ Partials/
|           |__ AuthLayout.vue     
|       |__ AuthSignIn.vue
|       |__ AuthSignUp.vue
|       |__ AuthRecover.vue
|       |__ AuthReset.vue
|   |__ [domain]
|        |__ Partials/
|            |__ SubpageLayout.vue
|            |__ [ComponentUsedOnce].vue
|        |__ subpageList.vue
|        |__ subpageEdit.vue
|        |__ subpagesCreate.vue
|__ router/index.ts     
|__ store/
     |__ Modules/
     |__ index.ts 
|__ utils/   
|__ App.vue
|__ main.ts

assets

This directory can contain images, SVG, CSS or SCSS for the application.

components

This component holds all the shared components of the application and they can be used in any part of the system.

config

Access to env variables with import.env.VITE_VARIABLE_NAME across our app loads too much dependency on the bundler to centralize all this in a single place and give us some good ts support and add default values.

In one of my projects, it looks like:

``// config/index.ts 
interface AppConfig {
    FIREBASE_API_KEY: string;
    FIREBASE_PROJECT_ID: string;
    FIREBASE_APP_ID: string;
    FIREBASE_SENDER_ID: string;
    PUSH_PK: string;
    MEASUREMENT_ID: string;
    GOOGLE_APP_KEY: string;
    GOOGLE_APP_CLIENT: string;
    FIREBASE_VAPID_KEY: string;
    IS_DEMO: boolean;
}

const isDemo = import.meta.env?.VITE_APP_DEMO

export const config: AppConfig = {
    FIREBASE_API_KEY: import.meta.env.VITE_FIREBASE_APP_KEY,
    FIREBASE_PROJECT_ID: import.meta.env.VITE_FIREBASE_PROJECT_ID,
    FIREBASE_APP_ID: import.meta.env.VITE_FIREBASE_APP_ID,
    FIREBASE_SENDER_ID: import.meta.env.VITE_FIREBASE_SENDER_ID,
    PUSH_PK: import.meta.env.VITE_PUSH_PK,
    MEASUREMENT_ID: import.meta.env.VITE_MEASUREMENT_ID,
    GOOGLE_APP_KEY: import.meta.env.VITE_GOOGLE_APP_KEY,
    GOOGLE_APP_CLIENT: import.meta.env.VITE_GOOGLE_CLIENT_ID,
    FIREBASE_VAPID_KEY: import.meta.env.VITE_FIREBASE_VAPID_KEY,
    IS_DEMO: Boolean(isDemo) && isDemo !== 'false'
}

domains

Contains the business logic of the application grouped by domain (remember DDD?) and each domain will have the sections: api, models, components, composables, unit tests

Subfolders:

api: contains all the API calls of the application as endpoints are in a central place we change once if it used in different parts of the app
models: Contains all the interfaces and types of the domain
components: Contains all the domain-related components
composables: Our domain-related vue composables
tests: Our unit tests

Plugins

Third-party services that you can change like eg. Auth0, Axios, i18n

Trade-offs

Pros:

Provide context about business logic/business domain in the application. It would benefit onboarding new devs to the code.
As the code is grouped by domains you can extract functionality easily to make a library if it's required for another project.

Cons

Nested folders
Elements could have more than one domain

Solving conflict points:

How to avoid over-nested components? Sometimes we tend to group subcomponents by their technical connotation eg.

Components 
   |__ Notifications 
      |__ NotificationCard 
      |__ NotificationTypes/ 
         |__ TaskApproved 
         |__ TaskRejected

An unnecessary nesting could be avoided by naming the component with the domain in front or creating another domain.

Eg.1

Components 
   |__ Notifications 
   |__ NotificationCard 
   |__ NotificationTypeTaskApproved 
   |__ NotificationTypeTaskRejected

Eg. 2

Components 
   |__ Notifications 
      |__ NotificationCard 
      |__ // ...more components 
   |__ NotificationTypes 
      |_ NotificationTypeTaskApproved 
      |_ NotificationTypeTaskRejected

How to deal with a component that seems to have multiple domains?

Sometimes a domain may cross with another for example widgets that are shown in the dashboard, should be put in a dashboard domain or its domain (Projects/ Tasks/ Tracks).

In this case we should analize the composition of the component and the requirements In this case the widgets are only used in the dashboard and if we go to its composition and props like title graphTypeand data all are the same in structure. Then we can conclude that each widget can be safely placed in the Dashboard domain.

Deploying and hosting Full-Stack Laravel apps

Jesus Guerrero — Mon, 05 Dec 2022 21:04:55 +0000

In today's development world is easier than ever to deploy your projects online with minimal configuration, with frontend and JAM Stack/node powered apps there are a lot of good options: Vercel, Netlify, GitHub Pages, Gitlab Pages, Firebase Hosting.

Unfortunately for modern php/Laravel powered apps with Vue/React frontend there's no too many with minimal configuration with the quality of the options mentioned above out of Heroku before the change of its terms and I don't find a good one-to-one replacement for it.

Here I want to share my journey replicate a workflow close to the Heroku experience with less than 10 dollars/month.

The needs

I am talking about a semi-production ready app so what are our checklist

Separated landing page from the app. we don't want app errors affecting our marketing / guides pages neither slowing them down and want to implement SEO that probably our app itself doesn't need, because the routes are guarded.
The Main app with Laravel/Jetstream and all resources we need for it (Database, cron tabs, redis)
A Database Manager to quick review the database if we are far from our computer and we need to manage the data online
Ownership, we don't need to pay extra money just to have a basic functionality we would like (now everything is a plugin, DB, Crons, etc...)
Build our frontend and deploy to the server when mergin our branch with master like Heroku and Vercel-like services do it.

For production app with > 100 paying customers maybe is better option to migrate to something like the Laravel services but for side projects maybe we just need to deploy and to show the app to your friends or get some users and see how it goes spending less as possible.

The solution (first attempt)

In my first attempt I used docker-compose to set up the environment with the services I needed here the most difficult part was serve the landing and app through Nginx as load balancer and its ssl but I found tools that make the task easier.

Cloud provider: Digital Ocean
Apps: Docker, Docker Compose
Tools: ssl-companion, jwilder/nginx-proxy

Steps

On the server:

Start a doplet with Digital Ocean (you have to give access to your ssh key when creating).
Set up your domains in DO.
Install docker
Setup a git bare repository on your server to accept git push from your local as you push to Github (later I automized this step with a Laravel package insane/remotr and just need to set and set the REMOTR_SERVER_IP and REMOTR_REPO_NAME in your .env doc.).

On local:

Verify that you can connect to your server via SSH
Setup a docker-compose.yml for your Laravel project here was mine Loger's docker-compose.
Add your server URL to git remote.
git push
Run your docker compose up command on the server via SSH and that's it

Maybe there's a shorter way to doit but not at USD 6.00 / Month without cold starts or using other services.

My current solution

Docker Compose with php and Laravel wasn't a good option for a $6 Doplet it was slower than my local environment out of the box so I ended up installing the LEMP stack.

One pain point I faced with the first approach was having to build the assets on my machine or the server it would be easier to manage this with GitHub actions so, I set it up.

Later I found a tutorial to connect Digital Ocean and GitHub actions I just needed the SSH key to push from GitHub Action instead of my local as the first approach. So, in every merge to master if the tests are green and after the archives of my frontend code is built a git push to the server is executed.


  name: Laravel App Deployment

  on:
    push:
      branches: [ "master" ]
    pull_request:
      branches: [ "master" ]

  jobs:
    build:
    deploy:
      if: ${{ github.event_name == 'push' }}
      name: Deploy
      runs-on: ubuntu-latest
      needs: build
      environment:
        name: demo
        url: ${{ secrets.SITE_URL }}
      steps:
        - uses: actions/checkout@v3
          with:
            fetch-depth: 0
        - name: Install SSH Key
          uses: shimataro/ssh-key-action@v2
          with:
            key: ${{ secrets.DO_DOPLET_SECRET }}
            known_hosts: unnecessary

       - name: Adding Known Hosts
         run: ssh-keyscan -H ${{ secrets.SSH_HOST }}  >> ~/.ssh/known_hosts

       - name: Download frontend build
         uses: actions/download-artifact@v3
         with:
          name: frontend-build
          path: public

       - name: Store live name
         run: git remote add live ${{ secrets.DO_REPO_URL }}

       - name: Deploy with git
         env:
           branch_name: live_digital_ocean
         run: |
           echo "Deploy to staging server"
           git config --global user.email "<>"
           git config --global user.name "Action Bot"
           git add .
           git checkout -b $branch_name
           git commit -m "deploy: build"
           git push live $branch_name:master -f
           echo "deployed to prod-staging"

       - name: Update Composer PHP
         uses: appleboy/ssh-action@master
         with:
           host: ${{ secrets.SSH_HOST }}
           username: ${{ secrets.SSH_USER }}
           key: ${{ secrets.DO_DOPLET_SECRET }}
         script: |
            cd /var/www/loger.com
            composer update --ignore-platform-reqs

you can check the complete file here: https://github.com/jesusantguerrero/atmosphere/blob/master/.github/workflows/laravel.yml

Updated stack:

IaaS: Digital Ocean Doplet
Apps: NGINX, MariaDB, PHP 8.1
Tools: cerbot, GitHub Actions

Steps

On the server:

Start a Doplet with Digital Ocean (you have to give access to your SSH key when creating).
Set up your domains in DO.
Install docker
Setup a git bare repository on your server to accept git push from your local as you push to GitHub (later I automized this step with a Laravel package insane/remotr and just need to set and set the REMOTR_SERVER_IP and REMOTR_REPO_NAME in your .env doc.).

On GitHub:

setup the SSH secrets that we need for the action:
SITE_URL
DO_REPO_URL
SSH_HOST
SSH_USER
DO_DOPLET_SECRET
Define our action Loger's deploy action

Honorable mentions:

fly.io
Digital Ocean App

Wrapping up

To summarize you can replicate the experience with a low cost using:

Digital Ocean Doplet
Create a git bare repository to push your changes with git
Using Docker or LEMP Stack on the server
Automate testing, build and deployment via SSH with GitHub actions

Thank you for reading, if you have any questions or want to share a stack the comments are open, as well as my Twitter and Github.

Five years into software development

Jesus Guerrero — Tue, 02 Aug 2022 21:09:19 +0000

This month of July 2022 marked my first 5 years of professional experience as a software developer, I will be always grateful for doing the thing I started as a hobby in my room back in the day. During that period It has been a lot of learning, some of my beliefs have been reinforced or challenged and others needed to be re-learned to fit into the real world.

So here I will reflect on the lessons, my reinforced beliefs, and challenges.

Background.

Why software engineering?

I can say that my life split in two the day I discover how software is made being able to create something from text and dragging components from an editor. I would go to the lab doing the common programs for the class (calculators) and doing my little projects like a clone of the login and home of Facebook in Delphi back in the day.

From that year until 2017 I was just playing around with languages like C, C++, Java, and C# doing CLI programs for my classes or experiments just as a hobby until I learned decent English and met the programming languages of the web, made my first web application an sold it to a local ISP company.

My drivers were curiosity and the creative nature of software development but also the fact that I could create things to make other people's jobs easier, we are the support career by excellence.

Beliefs

Do Something you like

There’s a dilemma I hear constantly about if you need to have passion for your job or give the extra mile. I find more regarding doing something you like for work (if you have the opportunity to do it), as learning and progress will be something that you see as challenges.

Discipline: It is easier to keep discipline by doing things you like rather than doing it just for the bag.
Better to have rather than 2 days a month: If you are just happy on the paydays the other days must be like a prison.

Holistic Approach

Try to see the whole picture, even when you don't have to take part in the whole process to learn how it works. Product Owners, Project Managers, Scrum Masters, Designers, Backend Development, and Frontends whatever the position you are doing try to know the limits, the responsibilities of each other.

Being concerned about the value that every part of the team brings to the table, the effort makes you don't undervalue the Job of anybody, help where you can, and analyze better some technical details when it includes cross-teams effort.

Understand the business side of the project.

Challenges and Lessons

Beyond code

I am one of those who thinks that not everything that comes to mind needs to be told and it's ok to not have an opinion on everything (unless this is your Job)

There are a lot of no-code-related things we need to work on and learn

Communication: Be able to communicate effectively with the people involved in the product and clients is a multiplier. The most productive teams I have been on has been the ones that understand that the team is a single unit and we all are pushing to same goal and we need to back each other from the sales team, designers, back and frontend developers to testers.

Maybe this is one goal of every team but in practice it is a hard one specially when the pressure and deadlines are tight.

Documenting, Talking about the scope of a ticket between backend and frontend before writing any line of code, having a clear definition of ready before taking any ticket, defining guidelines for the projects, etc. are all good signs of an effective communication.

Processes: The value of retrospectives are underestimated sometimes but they are the key to improve the process in each iteration and are a good space to reflect and recognize the accomplishments of previous sprints. yet it seems like the first ceremony of scrum to be sacrificed in projects.

Business vs Tech: At the end of the day we are doing software for people to help them but also to get some revenue in most cases. As software developers, we need to know in what situations.

Talk to buy time and do a better implementation if is a big important feature for the business
The latest is not better, the best is what gets the job done
When a business expectation is not realistic and needs to be broken.

Have an opinion but be realistic

At the beginning of my career, I used to dislike code challenges that weren’t a reflection of the day-to-day Job tasks, I still kind of dislike them but I am more open and in fact, prefer live coding rather than project assignments (because the latest requires more time and on top of that you have to explain while in the former you can explain and interact with an interviewer right there). I know it is not ideal but is the only tool they have to make sure they are going for the person they will pay.

I still need to do some improvements in the complex code, and FAANG-like coding challenges as I know I am not in a position of changing a standard you got to play by the rules of the game

Keeping feet on the ground

Under-pressure: Software is a demanding field, as we are a support field working with information and giving service to users or working in the next big startups there are always deadlines, sometimes bugs on production, and changing markets. That means that pressure is something that we’ll be dealing with (hopefully not in extreme cases so much) even though the pressure is on the environment to understand the urgency.
100%, not 110%, 150%: Time is an asset that we don't recover. Rest is important, family is important so is important to set healthy limits and enjoy life the way you like. Don’t give your time and effort for free to people that just take but never give
On trust (everything on paper) & stability: In Information security, there’s a say that the most vulnerable point of a system is people because we tend to trust people. In software having things jot down can save you a lot of time and effort. having the client requirements written, on email because words are easy to forget.

The best stability is to be prepared because everything can change and opportunities always come for those who are prepared.

Best stacks to build vue applications

Jesus Guerrero — Thu, 30 Jun 2022 10:04:32 +0000

Introduction

Vue is one of the most popular frontend frameworks for its easy of use, powerful reactivity and it modular nature what I mean by this is that you can start really small just the core or add router, state management, etc.

Here will discuss about 4 interesting stacks to build Vue applications.

Laravel + Inertia.js + Vue.

Laravel is one of the most complete backend frameworks to ever exist and the ecosystem is very dynamic and rich in terms of packages; from ORM to queues, notification systems, payments with integrations whatever thing you need to build a successful project Laravel has a official support or the community has build a package for it.

Inertia.js allows us to keep our controllers, validators on backend and send props and data to the frontend without the need of initial API calls, manage forms state in with a beautiful and clean API and even a SSR mode to improve the speed of your pages. Inertia serves as a glue between backend and frontend combining the best of Laravel apps and the best of SPA.

The Laravel team has make our job easier preparing starter kits and guess what, there is vite⚡support.

Pros

Mature and battle-tested backend framework
Let backend manage routing, validations and things like that
Get the best of SPA and traditional MPA
Top documentation

Cons

Good hosting/deploy options cost more money than (JAM Stack for example).
Needs to know two programming languages

Astro

When I first read about Astro I was amazed by the concepts and motivation of the project the concept of island was implemented nicely and ship just the JavaScript that is needed (or none at all) was a good contrast with the trend going on at that point and has inspired other frameworks to go in that direction.

Astro let you use any frontend framework among Vue, React, Svelte, Preact, Solid, Lit, Alpine to build components and build SSG it is a good option for documentations and personal sites, digital gardens and with great performance out of the box.

The framework is relatively new reaching the milestone of v1.0.0 beta in April new but its community is growing

Pros:

Great performance out of the box.
Support for the top frontend frameworks.
Easy to deploy and free hosting options.

Cons:

It is new.

Nuxt

Single Page Applications are good but some projects by their nature require a SEO-friendly approach and additional improvements and app performance and developer experience. Nuxt comes to fill that GAP in the Vue ecosystem.

The hybrid Vue framework allow us to build production ready apps faster giving us abstractions on things like routing, state management, SSR on top of Vue. The version 3 add support for Vue 3, vite and a better server engine nitro

Pros

Provide SSR, SSG perfect for SEO-friendly apps.
Easy to deploy and free hosting options.
Vue abstractions like Components auto-import, routing, store.

Cons

By the time of this post Nuxt 3 is in RC.

Vue + BaaS (firebase, Supabase, Amplify, etc)

Something that I really like about this approach is that you need fewer dependencies and that means that when a big upgrade like Vue 3 happens you wouldn't have to wait compatibility from meta-frameworks to migrate, you’ll have more opinions and control of your code this a good option if you don't need SSR, you're app idea is not too complex.

There are good options for backend as a service like Firebase, Supabase, and others that can provide authentication, database, real-time, storage etc. with little code compared to the traditional approach. It is good for proof of concepts, small apps.

Pros:

You can have functional apps with less backend code
Easy to deploy good hosting options
Good support for different auth providers.

Cons:

Vendor Locking (unless is opensource like Supabase).
Maybe not the best option for complex data, apps.

Final Thoughts

When it comes to development there is no silver bullet as every case is different and its own world the Vue ecosystem is not an exception, it is in our hands evaluate the trade offs of every case. If we set these stacks where the shine the most I am sure that any project will go in good direction.

Than you for reading, I hope the article can save you some time if you have any questions or want to share a stack the comments are open, as well as my Twitter and Github.

You shouldn't worry that much about your first programming language

Jesus Guerrero — Tue, 17 May 2022 13:44:55 +0000

One of the first questions or doubts that comes to mind once you set the goal of becoming a developer is what programming language is good to start.

In this post I want to cover two points:

Why you shouldn't care that much about it.
Tips to identify what can be a good fit for you.

Why you shouldn't care that much about it?

The main purpose of developers is to deliver solutions, The nature is to find and build solutions for problems and make tasks easier for others, just look how many apps and software you are using in day to day basis. Because of that one of the main characteristics a developer have to have is good problem solving skills, curiosity and hungry to learn, and then the other part is defining instructions for the computer in a way they can understand to build the solution.

The purpose of developer is to find and build solutions for problems and make tasks easier for others

To strength the first aspect most universities start with algorithms, and I am not talking about those complex mathematical ones, is sequence of steps to solve a problem using pseudocode in a way to focus in the main concepts: Declare variables and functions, loops, etc.

Good problem solving skills, the main concepts of programming, use of best practices, design patterns are the key that will help you to understand any language.

Pseudocode is a style of algorithm writing that should be adaptable to any programming language. There are no rules to write pseudocode but it should be readable by a programmer.

And you might think: "ok, I get it. Anyways I need to learn my first language". Bear with me, let's see some tips to discover that language that you'll fall in love with.

Tips to identify what can be a good fit for you

All of us had a reason of why we fell in love with programming It could be a game we played, an application we used and wanted extra features, an event we attended whatever. Been aware of that software that attracted you in the first place will give you what field of programming is the one that call your attention: Games, Desktop, Mobile, Web Applications.
Look for the top languages used in those categories and research about its strengths, use cases, applications that use them, syntax.
There are apps that gamify learning basic concepts of programing languages, one of them is sololearn it is a good option to explore, code and get help about certain languages when you are starting and feel like you are playing after that you can go deeper in other platforms.

If you want to learn to start a job, lets say within 6 months or a year a good options is identifying what programming languages are the most requested in Jobs in your country.

Wrapping up

Whatever your first programming language I can tell you the most important thing is that you learn how to code, best practices, and try to build and build more things, because in that way you'll discover more use cases than following tutorials always and bear in mind that after that first language you will be able to pick up a second or third language faster in case you needed.

I hope this post had been helpful for you, thanks for reading and have a great day.

Firebase: The good, the bad, the awesome.

Jesus Guerrero — Sat, 09 Apr 2022 21:13:15 +0000

Introduction

One of my dev colleagues said this is the best era to be a frontend developer and this is true. There are technologies out there that empower us to make great applications of any kind; a couple of clicks and we are ready to use them from our front end.

Today we are going to cover one of these technologies, Firebase.

What is firebase?

Firebase is a backend as a service platform backed by Google that provides a set of tools to help developers build, release and monitor web, Android, and IOS apps as well as engage with your users.

We are talking about Authentication, Database, Storage, Real-Time Database, hosting, and others.

My background with firebase

I have built some with applications with firebase but not at its full strength until February when I built zen a productivity app to help myself to focus on my tasks primarily and to participate in the Vercel & Hasnode hackathon. From the launch of Zen to the date of this post I've used like 80/90% of the tools of firebase and here are my pains, the things that have made me fall in love with firebase and the ones that have been a little bit more difficult to digest.

At the end of this post you will gain:

An overview of the most important tools provided by firebase.
Know scenarios where firebase shines the most.
Limitations you could find when building apps with firebase.
Resources that served me to improve my firebase skills.

The good parts.

Auth

I think almost every developer starts an application with the authentication flow. With firebase, this process is joyful and fast. we have 12 options for sign-in providers from email, google, FB, GitHub to anonymous sessions.

And to enable is just set the credentials and click to enable:

In the project, we have access to the methods of auth like this:



export const register = async (email, password) => {
    return firebase.auth().createUserWithEmailAndPassword(email, password).catch(reason => {
        throw new Error(reason.message);
    })
}

export const login = async (email, password) => {
    return firebase.auth().signInWithEmailAndPassword(email, password).catch((reason) => {
        throw new Error(reason.message);
    })
}

And the last step is listen when the state change to set/unset the authenticated user.



    firebase.auth().onAuthStateChanged((user) => {
        if (user) {
           ...
            firebaseState.user = user;
        }
    })

Database.

We have two database options Firestore and Realtime Database; both of which provide built-in real-time features. coming from a MySQL background where you had to implement that functionality with other tools this is mind-blowing and a killer feature by firebase and makes it a go-to option for applications like chats, and collaboration tools.

Both are No-SQL document-based databases. Firestore is the more powerful providing advanced queries and rules. You can create a collection that contains documents and every document can have subcollections

It allows setting rules, which are conditions to allow access for collections and documents in your database. Here, for example, we are telling to allow users to create tasks for them and allow delete and update if the user is the owner of the task.



match /tasks/{taskId} {
  allow create: if request.auth != null && request.resource.data.user_uid == request.auth.uid;
  allow delete, update: if request.auth != null && resource.data.user_uid == request.auth.uid; 
}

But you can set more advanced rules for example, with Zen I will need a sharing option in version 2.0 where users can let other users see their boards. We saved the collection in documents/shared/$(userUid)/accounts/${taskOwnerId}

The rules below would translate into "If I am authenticated and the task is mine or belongs to a user sharing board with me let me read the task".



match /tasks/{taskId} {
  allow read: if (request.auth != null && resource.data.user_uid == request.auth.uid) || (exists(/databases/$(database)/documents/shared/$(request.auth.uid)/accounts/$(resource.data.user_uid))); 
}

Functions

Not everything can run in the frontend, there is sensitive data that requires being managed from a server.

Cloud Functions are the firebase way to run stuff on the server without the pain of maintaining your own server (A.K.A serverless) they are flexible and complement very well with the other firebase tools. You can trigger a function on user sign-ups with Auth, after write, update, delete a document in Firestore, run scheduled functions in the background, the sky is the limit.

They even have *callables * that are functions you define in your backend and can invoke them from the front end just with the name. no need to install Axios and make a call to an endpoint.



exports.shareMatrix = functions.https.onCall(async (data, context) => {
   const user = context.auth;
   // do stuff with data
  return "OK"
})

Defining the cloud function in the backend



...
 const shareMatrix = functions.httpsCallable('shareMatrix');
  shareMatrix(formData).then(() => {
    clearForm()
    emit('saved', formData)
  })
...

Invoking the function in the frontend

Other tools.

Other tools worth mentioning are Hosting, Storage and analytics

** Hosting:** Allow to deploy multiple sites in a firebase project with SSL by default. you can set custom domains and restore deployments to previous versions

Storage: Allow saving files images, videos, audios etc. in the cloud for your firebase projects.
*Analytics: * Free analytics to track most used features, users retention.

The bad.

Database: Working with relationships in Firestore is a pain, if you are working with relational data you can do two things denormalize your data, in other words, is okay to repeat in order to deliver a document with all the information you need in a single query the recommended way or do multiple queries to obtain your data, which is not recommended for the way Firestore is priced they count reads, writes, and deletes the free limit is good enough but if you app success you can be charged more if you applied a bad structure in your data.

Vendor lock-in: Remember the part Backed by google? well, firebase has many tools and the most you use the harder is to migrate parts to other platforms you become dependent on Google if they decide to raise their prices tomorrow you don't have an easy path to save your data and restore in another service.
There's not fixed pricing. It is not totally bad because many services work like that today but the fact that you can't predict the cost of your next invoices from an accounting point of view is bad for planning.

When to use firebase

When you need fast development it could be a plus, because firebase takes care of the harder parts on Auth, Storage, Hosting, Server, Real-Time, etc.
You need real-time features and your app doesn't need many relations.
When you also need a mobile version of your app with android, React Native, for example, I can say from my experience is a smooth transition.
Prototype MVP with low-cost solutions.

When firebase might not be the best alternative

Working with complex database relations
You don't want to be dependant on one vendor

Wrapping up

Firebase can help us develop apps faster with a low cost even in their paid option - needed to use functions-. It's a good option for validating ideas, build small side projects, and if you are like me, having fun trying interesting technologies.

If you like these features and you can check other alternatives like:

I hope you find it useful, let me know about any questions you have here or on Twitter. thanks for reading and have a nice day.

From my point of Vue: State management

Jesus Guerrero — Mon, 07 Mar 2022 14:34:29 +0000

While working with medium/large sized apps you will find the need to have some data, functionality or logic available globally in a single source of truth because you need them in different components and pages across the app, it could be: user data, settings, permissions, etc. Sounds familiar? We refer to the solutions to address this problem as State Management.

In this post we are going to review some use cases when we might need a state management solution and the options we have in Vue to work with them.

Some use cases are:

Sharing data that are used deeply in components
Sharing global state
Working with SSR

Sharing data that are used deeply in components

Since vue 2 the framework provide an alternative to props to pass down data to a deep child without the need of a state manager library. This is the provide/inject in the composition API those functions are available and ready to share reactivity too.

We can find an Illustration for the idea in this picture from Vue documentation:

Let's see how the code will look like for the following use case:

We have a main layout that have a selectedDate and a component WeekContainer that have the last 7 days rendered as an individual component WeekDay component, we need the selectedDate data from the parent to see if one of the WeekDays is the selected one.

Components Schema:

  -- Parent [selectedDate]
  --- WeekContainer
  ---- WeekDay [needs selected day]

<script setup>
/** Parent **/

import { provide } from "vue"
const selectedDate = ref(new Date())
</script>

<template>
 <!--...-->
</template>

<script setup>
/** WeekContainer **/
</script>

<template>
 <div v-for="day in week" :day="day"> 
</template>

<script setup>
/** WeekDay Component **/

import { inject, computed } from "vue"
const props = defineProps({
  date: {
    type: Date,
    required: true
  } 
})

const selectedDate = inject('selectedDate')
const isSelectedDate = computed(() => selectedDate.value == props.date)
</script>

<template>
 <!--...-->
</template>

Live example
live code

Sharing global state

The second case is maybe one of the most common, In general if our application requires authentication, permissions and settings eventually we are going to need to have access to these data without the need to make an API call each time we need them.

Here we can combine some techniques to avoid an external library with vue 3 and the Composition Api we can use an reactive object to store the data an access to them when we need it. I wrote about this concept previously in build and auth flow with auth0 and Vue 3

Let's see some code:

Here we are exporting a reactive object with Auth Information

/** AuthState.js **/
import { reactive } from 'vue';

export const AuthState = reactive({
    user: null,
    loading: false,
    isAuthenticated: false,
    provider: null,
    // settings?
});

Next we can build a function that interacts with our AuthState to set the user in case of login/registration an unset in case of logout.

export const useAuth = (state) => { 
 // The implementation will go here

  return {
     login,
     logout,
     init
  }
}

Then in the main App.vue we can import our functions to setup the initial state. Then we an import the AuthState anywhere.

<script setup>
import { useAuth, AuthState } from "./utils/useAuth";
const { login, logout, init } = useAuth0(AuthState);

init();
</script>

<template>
  <div v-if="!AuthState.loading">
    <img alt="Vue logo" src="./assets/logo.png" />
    <div v-if="!AuthState.isAuthenticated">
      <button @click="login()" class="btn btn-primary">Login</button>
    </div>

    <div v-else>
      <p> Welcome to VueAuth <strong>{{ AuthState.user.name }}</strong></p>
      <button @click="logout()" class="btn btn-secondary">Logout</button>
    </div>
  </div>

  <div v-else>
    Loading ...
  </div>
</template>

You can check a complete code applying this technique here and applied to an app running in the wild zen

Working with SSR

We are heading to our last but not least use case, with Server Side Rendering our app have some special needs so far At this point the minimal requirement is sharing state between the server side generated content and the frontend once is hydrated.

In that case we can go with a library like pinia (the spiritual successor of Vuex🙏🏽). It gives us a SSR compatibility, modular and intuitive design in a light package with devtool support.

Usage: Declaring the store

// stores/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => {
    return { count: 0 }
  },
  // could also be defined as
  // state: () => ({ count: 0 })
  actions: {
    increment() {
      this.count++
    },
  },
})

Once it is declared you can use it in your components:

import { useCounterStore } from '@/stores/counter'

export default {
  setup() {
    const counter = useCounterStore()

    counter.count++
    // with autocompletion ✨
    counter.$patch({ count: counter.count + 1 })
    // or using an action instead
    counter.increment()
  },
}

Wrapping up

You can handle state management in Vue 3 with provide/inject, composables or store libraries like pinia
They might help you with these use case:
- Sharing data that are used deeply in components
- Sharing global state
- Working with SSR

I hope you find it useful, let me know about any questions you opinions you have Twitter or even share how you handle those use cases in the comment section.

Thanks for reading and have a nice day.

Resources

From my point of Vue: Vue 3 Ecosystem

Jesus Guerrero — Mon, 24 Jan 2022 14:52:55 +0000

Since the release of Vue3 on Sep 18, 2020 the ecosystem of the framework have been in a transition period because even when the core library was ready for production the ecosystem was behind.

I build a production ready project back in february 2021 with Vue3 and the change to the composition API was kind of smooth and you can build strong components abstractions like headless components. The libraries, plugins components available were minimal and those available weren't stable which was normal at this point.

In 2022 the future looks bright and looks like we'll reach the stability, there's a lot of good reactivity libraries, components and ui frameworks that are production ready.

In this post we are going to take a look at

The recommendations
How the ecosystem looks like right now
What are we missing for stability.

Recommendations

It is good to have multiple options to do tasks but sometimes when we got many options it can get chaotic and spent too much time selecting tools to start a new project, that's why official recommendations are good to set a standard, reduce cognitive load and spent less time in trivial things.

Here are some recommendations made by the Vue Core Team:

Toolchain

Vite. You are probably familiar with this one, Vite (pronounced /vit/) is a build tool that provides a fast developer experience to build apps, libraries, etc. The community has embrace it very well and has built awesome plugins, boilerplates and templates and has crossed the horizons of Vue itself and can work with react, svelte, preact and others with typescript support out of the box.

Volar and vue-tsc improves the experience of working with typescrypt and vue3. the first one is an editor extension built for Vue 3 and the latest is a wrapper to type-check Vue Single File coomponents and typescript and also generate definitions.

State Management:

One of the advantages of the composition API is that is reactivity works outside of components life cycle, and you can build what we know like stores just by wrapping an object in reactive over a year this is the approach I have followed personally; but for more advanced use cases Pinia is the recommended way to go.

Pinia is a state management library designed with the ideas of vuex-next so it is the spiritual succesor of Vuex some of the highlights of pinia are:

Devtool integration
SSR support
type-safe stores

Others

Tooling cli: create-vue

Playgounds Are an important option to share code with others and very useful when reporting bugs as reproduction links now the recommended playgrounds by the Vue team are:

What we have

Here is a short selection of libraries that might be useful for common cases when building new apps with Vue3

UI Libraries.

UI libraries are a good way to speed up development and just focus in business logic.

Vueuse

Vueuse is a set of composables(hooks) for vue 3 that wrap many Browser API's, animation and other utilities to provide an easier and reactive way of use to us.

Vitesse

Vitesse is a template strongly opinionated built by Anthony Fu it provides the best SSR boilerplate we have currently in the ecosystem, you can fork and customize it as you like for your next app.

What is coming

New docs:

The official documentation has been rewritten more beautiful than ever, with best practices, extra topics and the detailed and comprehensive technical writing to teach you how to use Vue

You can take a look of what is coming here

Nuxt 3:

Nuxt is coming powered by Vue3 that means by default will be faster, lighter and with great support for typescript but in addition vite support, webpack 5, a Nuxt CLI and a Nuxt Kit for module development are part of the new Nuxt 3 currently it is in beta so if we use it and report bugs if we find them or even help to solve them with a PR would be awesome.

Make Vue 3 default

Currently Vue 3 is kind of hidden one could say, because if we run npm install vue or search for Vue in google Vue 2 is the one that is coming, this is by design of course, so the event that officially will mark the new era is the Final switch when Vue 3 will be the default Vue. And this is coming soon.

Wrapping up

I hope you find this walk around the current Vue ecosystem useful, if you have seen any other cool project or have information that I missed to mention here share it with us on the comment section and as always let me know about any questions you have here or on Twitter.

Thanks for reading and have a nice day.

Resources

My roadmap in web 3

Jesus Guerrero — Thu, 23 Dec 2021 04:30:45 +0000

I decided to investigate and learn about blockchain, crypto, smart contracts and decentralized apps (dapps) A.K.A Web 3.0 from september 24, of 2021. I got curious about the term from the hype on twitter but it was more hype than truly helpful information with some valuable exceptions.

I am kind of documenting the journey and sharing my learning process hoping that can be useful for someone else but also expressing my own opinions.

The following lists express the order of my learning process but I didn't have to finish one to start the other. for example I was learning concepts yet, and doing the cryptozombies course.

1 - Learn the concepts.

It is kind of hard to assimilate and embrace an idea that challenge the status quo in so many ways. We tend to be cautious, skeptic and critic about it, specially when we heard just good things and anything negative.

By reading about the idea, the goals, the key concepts, how it works and the things web3 need to improve to materialize its final goal; we emphasize more with it.

These are a good places to start:

Ethereum Docs
Web2 vs Web3
I wrote about this in my article an honest look at web3
Web3, Blockchain, cryptocurrency: a threat or an opportunity? by Shermin Voshmgir

2 - Consume

By looking for and using some implementations of web3 applications OR Descentralized Apps(Dapps), we can understand what kind of applications we can build, the use cases and real world examples.

In my particular case I downloaded Brave browser as the implemented a nice use case to gain tokens for view to the adds, installed my metamask wallet, and started to follow people on twitter that provide useful content and resources.

3 - Get your hands dirty.

The primary blockchain to build smart-contracts and dapps is Ethereum in addition its platform Ethereum Virtual Machine (EVM) is compatible with other platforms like Polygon(Matic) for example, so by learning solidity, one of the language of EVM you can make smart-contracts for multiple blockchains.

cryptozombies is an excelent resource that cover all the things you need to know to build your first contracts and dapps. since the basics of the language, libraries, ERC721 how to use other contracts with yours, how to handle security, how to connect with oracles to how to connect your frontend with a smart contract. All this in an interactive gamified tutorial.

4 - Build, build and build.

After the cryptozombies course, I thought the right direction was to get my local environment to build my repos and code my contracts with the learnings of the course.

After some research My stack was like this:

Hardhat - Flexible, extensible and fast Ethereum development environment for professionals.
Vue 3 - The Progressive JavaScript Framework
ethers.js - JS library for interacting with the Ethereum Blockchain and its ecosystem
Brave Browser/Google Chrome with metamask extension

I choose to use Vue because I feel comfortable with it and it is my favorite framework but you can use whatever framework you like react, svelte, etc.

5 - Deploying to the world.

The next step after creating a smart contract and having a working frontend that interact with the smart contract, is deploying to let other use it and why not show case the working example in your portfolio.

This tutorial by Nader Dabit helped me with this and in addition, learned how to build a marketplace and about Polygon and Infura.

6 - Learning about cryptocurrencies

Cryptocurrencies are the fuel of Web3 they move the economy, they move the smart contracts and transactions that happens in the platforms. if you take a look at them you will see that most of these tokens have a platform behind Ether has Ethereum ecosystem, Links has Chainlink which is a set of oracles that you can use in your dapps, Solana is also an ecosystem that have its own a blockchain that allows you to build smart-contracts and so on.

Binance - App to buy/sell crypto
CoinMarketCap - App to keep track of your portfolio and market prices.
Whiteboard Crypto channel that explain different platforms, tokens and concepts of web3

In this step watch out with the scammers, don't take anything as financial advice and do your research before invest in a token.

7 - Iterate and get stronger.

With every step you get better and better in the next iteration you can build a more robust environment setup with an advanced hardhat setup I am planning to share the setup I did here. this will be another article

Complement your dapps with services like moralis, pinata for IPFS storage, etc.

In my case at this point I learned how to generate assets for my NFT's with hashlips

8 - Going out of the comfort zone.

Participating in hackathons at least once in life is a good way to inspire you and put you in the zone. In this state you can apply all the things you are learning, brainstorm ideas, see a lot of use cases for new technologies, interact with other developers and find communities with the same interest as you.

I participated in the chainlink hackathon I don't know if I am going to win anything yet, but the things I learned and applied are very valuable.

Patrick Collins: Aside from beginner make advanced topics well explained.
Chainlink oracles: Allow communicate smart contracts with off-chain data.

Conclusion.

After going through this steps and resources I gained some knowledge and built kind of fun things I hope this post help you to start building some smart contracts and have fun learning something new.

The post is unfinished because I will be adding more things as I go farther.

Thanks for reading. If you have any questions the comments are open, or if you like Twitter as well as my Github where I do some experiments and projects.

From my point of Vue: Headless components in vue

Jesus Guerrero — Thu, 18 Nov 2021 12:40:59 +0000

Hello there. This is the second article of the series "From my point of Vue", where we are going to discuss, explore, learn about some interesting topics from a Vue.js perspective.

Today we are going to explore Headless components I would consider this a middle/advanced topic, so previous knowledge of Vue.js will be required to better grasp the examples, the concept though, is global and you can take advantage of this on any other framework.

Without more delay, let's start.

Introduction

While creating applications you will find yourself either doing the same components with the same logic many times with different User Interface(UI) or installing packages with an opinionated design that have a very different look from the design of your app. It shouldn't be so hard to customize simple components like inputs, labels, buttons but when it comes to complex components like Selects, Tabs, Step Wizards things might be a little harder if the component wasn't created with UI flexibility in mind, and here is where Headless components come to the rescue.

What are headless components?

In plain words, headless components are the ones that handle the logic and behavior separated from the UI, giving the responsibility of how the component looks to the developer.

The headless component can expose values and functions (state and controls) that will allow a child component to control certain parts of it and make UI decisions based on a state value. In other words, they are not attached to the UI but serves as support.

This gives a huge advantage to share components across projects where their design are very different or to add variations of the same component: an upload component that the upload files as a list or carousel of images for example.

Background

The concept is not new, it's been discussed and implemented for a couple of years, I first heard of it when Adam Watham, creator of Tailwind CSS, and its team launched Headless UI libraries like downshift by Kent Dodds also used this pattern, just to mention a couple of cases.

Building a headless component

Requirements and approach

To illustrate let's build a headless Rate component with the following requirements:

The user can specify the count of how many stars should display.
Should expose the selected state.
Should expose the covered state.

To build this component we are going to use Tailwind CSS for styling, Vue 3 (the composition API) and codepen as a online editor.

The code

Here is how we defined our main component:

const { ref, defineComponent, createApp, computed } = Vue;

const Rate = defineComponent({
  name: 'rate',
  template: `<div>
        <slot 
            v-for="current in range" 
            :key="current" 
            :current="current+1"
            :selected="isSelected(current+1)"
            :covered="isCovered(current+1)"
            :set-hovered="setHovered"
        >
            {{ current }}
        </slot>
    </div>
  `,
  props: ['modelValue', 'count'],
  setup(props) {
    // state
    const hoveredIndex = ref(0);
    const range = computed(() => {
      return [...Array(props.count).keys()];
    })

    const isCovered = (current) => {
      return props.modelValue >= current || hoveredIndex.value >= current;
    }

    const isSelected = (current) => {
      return props.modelValue == current;
    }

    // state functions
    const setHovered = (current) => {
      hoveredIndex.value = current;
    }

    return {
      range,
      isSelected,
      isCovered,
      setHovered
    }
  }
})

Let's explain what is happening here we have three main blocks

The state

range: which is an array from 0 to the value we pass count for this case [0, 1, 2, 3, 4]

hoveredIndex: to store the last star we set the mouse over.

isSelected: will return true if the value passed is the current rate.

isCovered: will return true if the value passed is less than the current rate

The controls

setHovered: will set the index of the start we put the mouse on.

And the template

<div>
      <slot 
          v-for="current in range" 
          :key="current" 
          :current="current+1"
          :selected="isSelected(current+1)"
          :covered="isCovered(current+1)"
          :set-hovered="setHovered"
      >
          {{ current }}
      </slot>
</div>

Here we are telling to this component: hey, render n times whatever element I pass to you as a child and expose the current value, if is selected, if is covered and the function to set the hover.

And this is exactly what we are going to do next.

Using our component

Now we'll use our component to render 5 stars and gives some style with Tailwind gray text for the color of the stars but yellow when is covered or selected and changing the value when we click and the hoverIndex with the mouseover and mouseout.

...
  <h4 class="mt-4 mb-1 font-bold text-blue-900">How useful was the post?</h4>
   <Rate v-model="rating" :count="5" class="space-x-2 cursor-pointer" v-slot:default="{ selected, covered, current, setHovered }">
     <button 
          @click="rating=current" 
          @mouseover="setHovered(current)"
          @mouseout="setHovered(0)"
          class="font-bold text-gray-400 transition transform cursor-pointer hover:text-yellow-400 hover:scale-110" 
          :class="[(selected || covered) ? 'text-yellow-500': 'text-gray-400']"
      > 
       <i class="fa fa-star" > </i>
     </button>
   </Rate>
....

Changing the UI

Scale rate

To change to a scale rate for example we just need to change the UI without touching the logic anymore.

  <!-- Scale Rate -->
...
  <Rate v-model="scale" :count="10" class="space-x-2 cursor-pointer" v-slot:default="{ current, selected }">
     <button 
        @click="scale=current" 
         class="px-3 py-0.5 font-bold border border-gray-400 transition transform rounded-lg cursor-pointer hover:text-blue-400" 
         :class="{'text-blue-500 border-blue-500 shadow-md ring ring-blue-200': selected}"> 
      {{ current }}
     </button>
   </Rate>
...

Single choice list

Another change this time with a vertical 3 choice list.

    <!-- Single Choice List -->
  <h4  class="mt-4 mb-1 font-bold text-blue-900 mt-5">How often do this case happens to you?</h4>
  <Rate v-model="choice" :count="3" class="flex flex-col space-y-2 cursor-pointer w-full" v-slot:default="{ current, selected }">
     <button 
        @click="choice=current" 
         class="block w-44 text-left px-3 py-0.5 font-bold border border-gray-400 transition transform rounded-lg cursor-pointer hover:text-gray-400" 
         :class="{'text-gray-500 border-gray-500 shadow-md ring ring-gray-200': selected}"> 
          <span class="bg-gray-900 text-white px-1.5 rounded-md py-0.5">
            {{ letters[current - 1] }}
          </span>
          {{ choices[current - 1] }}
     </button>
   </Rate>

That's what I call maximum flexibility 👌✨. As a last improvement, we could add a wrapper component to support those three use cases and pass a prop like mode that accepts rate, scale, and choices once we have our look defined and write less code in the actual pages. I will let it to you, for practice.

You can see the example code running in Codepen

Wrapping up

Headless components provide a way to reuse the logic of components but with the flexibility of customizing the UI.
They are good for sharing complex components across projects.
It probably requires wrapper components to use your customized UI across the app in contrast to a traditional component. That will be the cost of flexibility

I hope you find it useful, let me know about any questions you have here or on Twitter. thanks for reading and have a nice day.

Resources

Build an authentication flow with Auth0 and Vue3

Jesus Guerrero — Sun, 24 Oct 2021 17:34:22 +0000

Introduction

In every project, you'll probably start building the login, registration, reset password functionality, well, Auth0 provides a set of tools that are going to help you to complete that kind of task faster than the traditional way.

In this guide, you'll create an entire authentication flow with Auth0 and Vue3.

By the end of this post, you'll have a vue app that allows users to register, login
and logout and be able to use that knowledge to build your next project.

Prerequisites

Node.js installed in your machine at least version 12.20
Knowledge of CSS.
Previous experience with Vue.
Basic understanding of the composition API

Step 1: Creating a new vue3 project

To create a new Vue3 project we use vite (pronounced 'vit') which is going to scaffold the structure with the latest version of vue and set the dependencies and provide a fast developer experience.

Running the following code in your terminal will ask you for the name of the new project.

npm init vite@latest --template vue

Next go to the project dir in the terminal and install the dependencies with the following command:

cd project-dir && npm install

One last install, this time is the SDK of Auth0 for single-page applications

npm install @auth0/auth0-spa-js

Create a new file .env.local and type VITE_AUTH0_DOMAIN and VITE_AUTH0_DOMAIN let it there and you'll be back later to this file to place those values from Auth0.

VITE_AUTH0_DOMAIN=
VITE_AUTH0_CLIENT_ID=

Step 2: Create an Auth0 project

Before drop your first lines of code you'll need to create a new auth project for that:

Go to Auth0 and create an account
In the left side menu click on Applications dropdown then Applications option and then Create Application. This will open a modal to type the name and select an application type.
Select Single page web applications and give VueAuth as the application name, you can come back and change it later.
Go to settings tab in the newly created project and copy Domain and Client ID to VITE_AUTH0_DOMAIN and VITE_AUTH0_CLIENT_ID respectively in .env.local file
Go down a little more until the Application URIs section and you need to set some routes to let Auth0 know where to go after certain events in this case our URL is http://localhost:3000 and you need to type in Allowed Callback URLs and Allowed Logout URLs and Allowed Web Origins like is showed in the picture below

Step 3: Creating useAuth0 composable.

It's time to drop some lines of code, as Vue3 gives us the power of reactivity even outside a component you are going to use that to wrap the Auth0 flow into its own file
create a new folder in /src called utils/ and inside create a new file named useAuth0.js

In /src/utils/useAuth0.js you need to create a new reactive object to save the AuthState and it will be exported.

// utils/useAuth0.js
import createAuth0Client from '@auth0/auth0-spa-js';
import { reactive } from 'vue';

export const AuthState = reactive({
    user: null,
    loading: false,
    isAuthenticated: false,
    auth0: null,
});

Next, in order to simplify the configuration management lets add a config constant and set the domain and client_id from our .env.local those are available using the keywords import.meta.env.NAME_OF_VARIABLE as follows:

// utils/useAuth0.js
...
const config = {
    domain: import.meta.env.VITE_AUTH0_DOMAIN,
    client_id: import.meta.env.VITE_AUTH0_CLIENT_ID
};

Now the most important part, to wrap the authentication flow we are going to export an arrow function that takes the state as param, which will be the AuthState you made at the top of this file. And it's going to return three functions login, logout and initAuth

export const useAuth0 = (state) => { 
 // The implementation will go here

  return {
     login,
     logout,
     initAuth
  }
}

Let's write a utility function it is not going to be returned but it will be called after login, logout, and initAuth it will be called handleStateChange and is going to pass the authentication status from Auth0 to you AuthState.

export const useAuth0 = (state) => { 
   const handleStateChange = async () => {
        state.isAuthenticated = !!(await state.auth0.isAuthenticated());
        state.user = await state.auth0.getUser();
        state.loading = false;
    }

...
}

In the next function initAuth you'll create a new instance of Auth0Client and for that you need the configuration you saved before domain, client_id, cacheLocation and redirect_uri

domain **and **client_id: are the tokens you saved in .env.local
cacheLocation: Is where Auth0 stores the token, by default the value is 'memory' that is not going to persist after you reload the page, since we don't want this use localstarage that keeps the token even after refreshing the page.
redirect_uri: Remember the routes you set before in the settings of your application in Auth0, well, you need it here with window.location.origin you get the current location of the browser that will be 'http://localhost:3000' the same you saved there.

After the Auth0Client is created, call the handleStateChange function to get the current authentication state.

...
const initAuth = () => {
     state.loading = true;
     createAuth0Client({
          domain: config.domain,
          client_id: config.client_id,
          cacheLocation: 'localstorage',
          redirect_uri: window.location.origin
      }).then(async auth => {
          state.auth0 = auth;
          await handleStateChange();
      });        
}

Next, the login, auth0 has a loginWithPopup that is going to open a popup and ask the user for the credentials to login or register after.

...
const login = async () => {
    await state.auth0.loginWithPopup();
    await handleStateChange();
};

Next, the logout, auth0 has a logout function that accepts an object as an argument and a returnTo property is required. Here you can type your current location with window.location.origin.

...
const logout = async () => {
    state.auth0.logout({
          returnTo: window.location.origin,
    });
}

By now your src/utils/useAuth0.js file should look like this:

// utils/useAuth0.js
import createAuth0Client from '@auth0/auth0-spa-js';
import { reactive } from 'vue';

export const AuthState = reactive({
    user: null,
    loading: false,
    isAuthenticated: false,
    auth0: null,
});

const config = {
    domain: import.meta.env.VITE_AUTH0_DOMAIN,
    client_id: import.meta.env.VITE_AUTH0_CLIENT_ID
};

export const useAuth0 = (state) => {
    const handleStateChange = async () => {
        state.isAuthenticated = !!(await state.auth0.isAuthenticated());
        state.user = await state.auth0.getUser();
        state.loading = false;
    }

    const initAuth = () => {
        state.loading = true;
        createAuth0Client({
            domain: config.domain,
            client_id: config.client_id,
            cacheLocation: 'localstorage',
            redirect_uri: window.location.origin
        }).then(async auth => {
            state.auth0 = auth;
            await handleStateChange();
        });        
    }

    const login = async () => {
        await state.auth0.loginWithPopup();
        await handleStateChange();
    };

    const logout = async () => {
        state.auth0.logout({
            returnTo: window.location.origin,
        });
    }

    return {
        login,
        logout,
        initAuth,
    }

}

Step 4: Setup App.vue

Let's modify the src/App.vue.

Take a look at the final code of the App.vue I'll explain bellow.

<script setup>
import { useAuth0, AuthState } from "./utils/useAuth0";
const { login, logout, initAuth } = useAuth0(AuthState);

initAuth();
</script>

<template>
  <div v-if="!AuthState.loading">
    <img alt="Vue logo" src="./assets/logo.png" />
    <div v-if="!AuthState.isAuthenticated">
      <button @click="login()" class="btn btn-primary">Login</button>
    </div>

    <div v-else>
      <p> Welcome to VueAuth <strong>{{ AuthState.user.name }}</strong></p>
      <button @click="logout()" class="btn btn-secondary">Logout</button>
    </div>
  </div>

  <div v-else>
    Loading ...
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.btn {
  padding: 8px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  border: none;
  cursor: pointer;
  min-width: 100px;
  border-radius: 4px;
  font-weight: bold;
}

.btn-primary {
  background: #41B883;
  color: white;
}

.btn-secondary {
  background: #aaa;
  color: white;
}
</style>

At the top of the file in the script section AuthState and useAuth0 are imported from the wrapper you created.

The AuthState is used to call useAuth0 and get the login, logout and initAuth functions.

And at the end of the script initAuth() is called to create the instance and get the current authentication state of the user.

<script setup>
import { useAuth0, AuthState } from "./utils/useAuth0";
const { login, logout, initAuth } = useAuth0(AuthState);

initAuth();
</script>

In the template section we check if the app is loading and if the user is not authenticated show the login button that calls the login function in the script but if it is authenticated show the user name and a logout button calling the logout function from the script.

If the app is loading it shows the loading... text.

<template>
  <div v-if="!AuthState.loading">
    <img alt="Vue logo" src="./assets/logo.png" />
    <div v-if="!AuthState.isAuthenticated">
      <button @click="login()" class="btn btn-primary">Login</button>
    </div>

    <div v-else>
      <p> Welcome to VueAuth <strong>{{ AuthState.user.name }}</strong></p>
      <button @click="logout()" class="btn btn-secondary">Logout</button>
    </div>
  </div>

  <div v-else>
    Loading ...
  </div>
</template>

Final result

VueAuth - Watch Video

Conclusion

You built an authentication flow with Vue3 and Auth0, congrats! Now that you are familiar with Auth0 and its benefits you are able to implement it in your next project.

Thanks for reading. If you have any questions the comments are open, or if you like Twitter as well as my Github where I do some experiments and projects.

Have a good day.