DEV Community: Kelvin Chidothi

Nuxt 3 authentication with pinia

Kelvin Chidothi — Tue, 21 Mar 2023 07:53:37 +0000

A while ago, l wrote a post on Authenticating a Nuxt 2 application with a Laravel Sanctum API. As much as l like Nuxt.js because of it's cool features like middlewares, plugins, routing, SSR, Nuxt 3 has issues with authentication. Here are some of the reasons:

Some packages have been removed in Nuxt 3 i.e. nuxt-auth
No auth scaffolding
Default configurations for axios, auth have been depreciated in nuxt.config.ts

To write a good authentication logic in Nuxt 3, you have to come up with your own logic in Store, Middlewares (for routing).

I tried sidebase package @sidebase/nuxt-auth which is a good package but requires more customizations. Later l switched to pinia as documented here:

This method work really well, kudos, but there's a problem again with persistence of state.

To achive this, install the following package:

yarn add -D @pinia-plugin-persistedstate/nuxt or
npm i -D @pinia-plugin-persistedstate/nuxt

Once this is installed at it under your modules array in nuxt.config.js

export default defineNuxtConfig({
  modules: [
    '@pinia/nuxt',
    '@pinia-plugin-persistedstate/nuxt',
  ],
})

Finally add a persist prop under your defined store like this:

// ~/store/auth.ts
import { defineStore } from 'pinia'

export const useStore = defineStore('auth', {
  state: () => {
    return {
      authenticated: 'true',
    }
  },
  persist: true,
})

This will automatically instruct pinia to persist any data within it's store attribute. Pinia does this by either using a cookie or local storage, the choice is yours. Reference to this documentation for more global options for pinia persistence.

Vite React Build Options - Rollup.js

Kelvin Chidothi — Wed, 28 Sep 2022 14:12:56 +0000

My recent project in React Boostraped with Vite gave me a tough time. Mostly because it was my first time using Vite, of course l used it cos it's rendering speed. l came across an issue where l had to add OneSignalSDKWorker file OneSignalWorker.js in the root folder. In development it worked but not on production. This was because during build Vite ignored any file in the src and root folder that had no attribute/linkage to the project (to reduce size of the minified bundle).

I had to find a work around it. The first attemt was to use rollup.js. There are Build options for Vite in vite.config.js that can be changed . Here's what l did with the rollup options:

build: {
    rollupOptions: {
      input: {
        app: './index.html',
        'OneSignalSDKWorker': './OneSignalSDKWorker.js',
      },
      output: {
        entryFileNames: assetInfo => {
          return assetInfo.name === 'OneSignalSDKWorker' ? '[name].js' : 'assets/js/[name].js'
        }
      },
    },
  },

In the code block above we get our inputs. the app options is for the entry point and the second one is assigning a variable to the directory with the file. During build the file be placed in the dist root folder.

Exception: This works with .js files and other es build types.

For adding general files in the root folder, create a directory in src and name it public. You can now place all of your files into that folder. On build, all files will appear in the dist root directory.

Read up more on rollup.js
Cheers!

Uploading Multiple Files in Vue.js using a Laravel API

Kelvin Chidothi — Mon, 16 May 2022 09:49:08 +0000

Recently l wanted to upload documents from Vue.js to a Laravel backend. All API's were set up and were working in Postman. Doing in vue.js was a bit of a problem. l was using Vuetify for the styling so l used a v-file-input set to multiple using the predefined prop.

On upload, l was using Axios. Basic stuff. To attach documents l created an instance of FormData() and appended the documents formData.append('images[]', this.images).

In my controller in Laravel, l was looping over the array of images and storing them:

foreach($request->file('images') as $image){
  $image->store('docs');
}

This implementation failed and l did alot of modifications and turns out l had to loop over the documents also in Vue.js like this:

this.images.foreach((image, index) => { formData.append('images[]', image) });

This finally worked and l hope it works for you too!

Generating an APK in React Native CLI

Kelvin Chidothi — Fri, 06 May 2022 09:27:41 +0000

React Native

has gained popularity over the years, with the whole concept of cross-platform development developer has flocked to it. l am one of the developers. l started React Native about 2 years ago and l did a bit of CLI before loving Expo

Debate is still on about what is better CLI or Expo.

After a while not using CLI, l ended up wanting to use it for some project. l settled my Android environment and everything but everytime l wanted to generate a stand alone debug apk using gradlew assembleDebug it would build an apk that still required the Metro server. l mean how absurd. l tried building it in Android Studio and same issue came up.

l discovered that they now commented some build features in /android/app/build.gradlefile. They are now optional and everytime you want a standalone apk you need to uncomment some few lines.

For example these lines preceeding the hemes engine use in build:

bundleInDebug: true,
bundleAssetName: "index.android.bundle

So l thought of sharing this, if anyone ever get confused to as what's happening. Thank you for reading!

Mantainig Session in Nuxt JS Laravel Authentication API

Kelvin Chidothi — Mon, 02 May 2022 23:02:45 +0000

l had an issue in my recent project. Well based on the title, you guessed right "Mantaining session". As much as NuxtJS provides a proper configuration of API integrations and ofcourse authentication with **@nuxt/next-auth** package, it's somehow challenging to keep session.

In my project l was using Laravel as the backend framework and created API's guarded with sactum. After configuring everything as per (https://auth.nuxtjs.org/schemes/local). It was really hard. *Session was being removed on reload page of the nuxtjs app.
*
So here was a work around to it. I added vuex-persist package to the nuxt project using yarn and created a plugin. l added the plugin in the plugins sections in nuxt.config.js and automatically my data was saved in a cookie as much as session was active!

l hope you guys read more about vuex-persist or other related libraries. If any questions let me know.
👌👌