DEV Community: Andrew Eze

How to Handle Authentication in Nuxt with a Separate Backend API

Andrew Eze — Tue, 15 Jul 2025 13:55:28 +0000

One of the major decisions to make when building a frontend with Vue or React (Next.js or Nuxt.js) is how to handle authentication. There are several auth packages that can help you handle authentication in Nuxt. However, If you already have a backend api that handle authentication, most of the packages seems like overkill, some even introduce unnecessary complications like requiring a different database to store auth data or using a hosted solution.
Backend frameworks or languages like FastApi/Django (python), Laravel (PHP), Nest.js/Adonis.js (Node.js) have robust authentication systems. So, you just need your frontend to interface with that.

Most times, when building a frontend app with authentication, you need a system or package to;

Handle request to the backend to retrieve and store JWT token.
If you're using password less option (social login or OTP/One time link), to send a request to the backend to handle generation of token and authentication. So, in summary you need to handle authentication and to manage auth state/data.

Steps to Handling and Managing Authentication

Send a request with credentials to the backend api to retrieve a JWT token, a refresh token and in some cases user data.
Store the tokens in a secure cookie or session.
Store non-sensitive user data in local storage.
Handle retrieving user data initially and subsequently.
Handle refreshing the token when it expires.
Use a middleware to manage access to protected pages. The middleware checks if a valid token is present. You can also check for roles and permissions.

How to Manage Authentication easily on Nuxt
The steps above largely applies. However you can utilize in-built functions like useCookie, useState and packages like pinia to handle storage and retrieval of tokens and user data.

You can use a package to handle to whole process. I created a package that handles secure JWT authentication and Google OAuth with flexible callback handling. It also handles Token Refresh, Route Protection, Auto imports, and SSR Support.
You can use this package together with you backend api, and let your backend handle the authentication process to avoid duplication.

To use the package:

Add @andychukse/nuxt-auth dependency to your project

# Using yarn
yarn add @andychukse/nuxt-auth

# Using npm
npm install @andychukse/nuxt-auth

Add @andychukse/nuxt-auth to the modules section of nuxt.config.ts and add your config.

export default defineNuxtConfig({
  modules: ['@andychukse/nuxt-auth'],

  // Configure the auth module
  auth: {
    isEnabled: true,
    baseUrl: 'https://api_url/api/auth',
    callback: '/',
    endpoints: {
      signIn: { path: '/login', method: 'post' },
      signOut: { path: '/logout', method: 'post' },
      signUp: { path: '/register', method: 'post' },
      getSession: { path: '/session', method: 'get' },
      refresh: { path: '/refresh', method: 'post' },
      google: { path: '/google', method: 'post' },
    },
    token: {
      tokenPointer: '/access_token',
      refreshTokenPointer: '/refresh_token',
      type: 'Bearer',
      cookieName: 'auth.token',
      headerName: 'Authorization',
      maxAgeInSeconds: 86400, // 1 day
      sameSiteAttribute: 'lax', //or strict
      cookieDomain: '',
      secureCookieAttribute: false,
      httpOnlyCookieAttribute: false,
      refresh: {
        refreshOnlyToken: true,
        cookieName: 'auth.refresh',
        maxAgeInSeconds: 7776000, // 90 days
        requestTokenPointer: '/refresh_token',
      },
    },
    social: {
      google: {
        clientId: 'your-google-client-id.googleusercontent.com',
        redirectUri: 'http://localhost:3000/auth/google/callback',
        scopes: 'openid profile email'
      }
    },
  },
})

The tokenPointer indicates how your backend returns the token
if it is /access_token
Then your backend is sending it back as

{
"access_token": "token string"
....
}

Then you can handle registration and login easily
Simple Registration

<template>
  <div class="auth-form">
    <h2>Create Account</h2>
    <form @submit.prevent="handleRegister">
      <div class="form-group">
        <label for="name">Full Name:</label>
        <input 
          id="name"
          v-model="form.name" 
          type="text" 
          required 
          placeholder="Enter your full name"
        />
      </div>

      <div class="form-group">
        <label for="email">Email:</label>
        <input 
          id="email"
          v-model="form.email" 
          type="email" 
          required 
          placeholder="Enter your email"
        />
      </div>

      <div class="form-group">
        <label for="password">Password:</label>
        <input 
          id="password"
          v-model="form.password" 
          type="password" 
          required 
          placeholder="Choose a password"
          minlength="8"
        />
      </div>

      <div class="form-group">
        <label for="confirmPassword">Confirm Password:</label>
        <input 
          id="confirmPassword"
          v-model="form.confirmPassword" 
          type="password" 
          required 
          placeholder="Confirm your password"
        />
      </div>

      <button type="submit" :disabled="loading || !isFormValid" class="btn-submit">
        {{ loading ? 'Creating account...' : 'Create Account' }}
      </button>

      <p v-if="error" class="error">{{ error }}</p>
    </form>
  </div>
</template>

<script setup>
const { signUp, loading } = useAuth()

const form = reactive({
  name: '',
  email: '',
  password: '',
  confirmPassword: ''
})

const error = ref('')

const isFormValid = computed(() => {
  return form.password === form.confirmPassword && 
         form.password.length >= 8
})

const handleRegister = async () => {
  try {
    error.value = ''

    if (!isFormValid.value) {
      error.value = 'Please check your password'
      return
    }

    await signUp({
      name: form.name,
      email: form.email,
      password: form.password
    }, {
      callbackUrl: '/welcome' // Optional: redirect after registration
    })
    // User will be redirected automatically
  } catch (err) {
    error.value = err.message || 'Registration failed'
  }
}
</script>

Route Protection with Middleware
Protect routes by adding the auth middleware. You can also extend the middleware by creating your own. This can be useful if you want to handle admin routes. You can check the user data for roles/permissions and grant or deny access.

<script setup>
definePageMeta({
  middleware: 'auth'
})
</script>

<template>
  <div>
    <h1>Protected Page</h1>
    <p>This page is only accessible to authenticated users.</p>
  </div>
</template>

The useAuth() composable provides the authentication functionality

<template>
<div>
  <div v-if="token">
   Authenticated
   {{ data?.name }}
  </div>
  <div v-else>
   Not Authenticated
  </div>
 </div>
</template>
<script setup>
const { data, token } = useAuth

//Update user
const updateUser = async () => {
  //handle update user data
  //After update, You can refresh the user data with
  await getSession()
}
</script>

You can read more on the documentation Simple Nuxt Auth

I just created a post on easy way handle authentication in Nuxt with a Backend

Andrew Eze — Thu, 03 Jul 2025 15:29:54 +0000

Andrew Eze

Jul 3 '25

Best Way to Handle Nuxt Auth with Backend API

#nuxt #backend #api #frontend

Comments

4 min read

Best Way to Handle Nuxt Auth with Backend API

Andrew Eze — Thu, 03 Jul 2025 15:28:23 +0000

Most times, when building a frontend app with authentication, you need a system or package to;

Handle request to the backend to retrieve and store JWT token.
If you're using password less option (social login or OTP/One time link), to send a request to the backend to handle generation of token and authentication. So, in summary you need to handle authentication and to manage auth state/data.

Steps to Handling and Managing Authentication

Send a request with credentials to the backend api to retrieve a JWT token, a refresh token and in some cases user data.
Store the tokens in a secure cookie or session.
Store non-sensitive user data in local storage.
Handle retrieving user data initially and subsequently.
Handle refreshing the token when it expires.
Use a middleware to manage access to protected pages. The middleware checks if a valid token is present. You can also check for roles and permissions.

To use the package:

Add @andychukse/nuxt-auth dependency to your project

# Using yarn
yarn add @andychukse/nuxt-auth

# Using npm
npm install @andychukse/nuxt-auth

Add @andychukse/nuxt-auth to the modules section of nuxt.config.ts and add your config.

export default defineNuxtConfig({
  modules: ['@andychukse/nuxt-auth'],

  // Configure the auth module
  auth: {
    isEnabled: true,
    baseUrl: 'https://api_url/api/auth',
    callback: '/',
    endpoints: {
      signIn: { path: '/login', method: 'post' },
      signOut: { path: '/logout', method: 'post' },
      signUp: { path: '/register', method: 'post' },
      getSession: { path: '/session', method: 'get' },
      refresh: { path: '/refresh', method: 'post' },
      google: { path: '/google', method: 'post' },
    },
    token: {
      tokenPointer: '/access_token',
      refreshTokenPointer: '/refresh_token',
      type: 'Bearer',
      cookieName: 'auth.token',
      headerName: 'Authorization',
      maxAgeInSeconds: 86400, // 1 day
      sameSiteAttribute: 'lax', //or strict
      cookieDomain: '',
      secureCookieAttribute: false,
      httpOnlyCookieAttribute: false,
      refresh: {
        refreshOnlyToken: true,
        cookieName: 'auth.refresh',
        maxAgeInSeconds: 7776000, // 90 days
        requestTokenPointer: '/refresh_token',
      },
    },
    social: {
      google: {
        clientId: 'your-google-client-id.googleusercontent.com',
        redirectUri: 'http://localhost:3000/auth/google/callback',
        scopes: 'openid profile email'
      }
    },
  },
})

The tokenPointer indicates how your backend returns the token
if it is /access_token
Then your backend is sending it back as

{
"access_token": "token string"
....
}

Then you can handle registration and login easily
Simple Registration

<template>
  <div class="auth-form">
    <h2>Create Account</h2>
    <form @submit.prevent="handleRegister">
      <div class="form-group">
        <label for="name">Full Name:</label>
        <input 
          id="name"
          v-model="form.name" 
          type="text" 
          required 
          placeholder="Enter your full name"
        />
      </div>

      <div class="form-group">
        <label for="email">Email:</label>
        <input 
          id="email"
          v-model="form.email" 
          type="email" 
          required 
          placeholder="Enter your email"
        />
      </div>

      <div class="form-group">
        <label for="password">Password:</label>
        <input 
          id="password"
          v-model="form.password" 
          type="password" 
          required 
          placeholder="Choose a password"
          minlength="8"
        />
      </div>

      <div class="form-group">
        <label for="confirmPassword">Confirm Password:</label>
        <input 
          id="confirmPassword"
          v-model="form.confirmPassword" 
          type="password" 
          required 
          placeholder="Confirm your password"
        />
      </div>

      <button type="submit" :disabled="loading || !isFormValid" class="btn-submit">
        {{ loading ? 'Creating account...' : 'Create Account' }}
      </button>

      <p v-if="error" class="error">{{ error }}</p>
    </form>
  </div>
</template>

<script setup>
const { signUp, loading } = useAuth()

const form = reactive({
  name: '',
  email: '',
  password: '',
  confirmPassword: ''
})

const error = ref('')

const isFormValid = computed(() => {
  return form.password === form.confirmPassword && 
         form.password.length >= 8
})

const handleRegister = async () => {
  try {
    error.value = ''

    if (!isFormValid.value) {
      error.value = 'Please check your password'
      return
    }

    await signUp({
      name: form.name,
      email: form.email,
      password: form.password
    }, {
      callbackUrl: '/welcome' // Optional: redirect after registration
    })
    // User will be redirected automatically
  } catch (err) {
    error.value = err.message || 'Registration failed'
  }
}
</script>

<script setup>
definePageMeta({
  middleware: 'auth'
})
</script>

<template>
  <div>
    <h1>Protected Page</h1>
    <p>This page is only accessible to authenticated users.</p>
  </div>
</template>

The useAuth() composable provides the authentication functionality

<template>
<div>
  <div v-if="token">
   Authenticated
   {{ data?.name }}
  </div>
  <div v-else>
   Not Authenticated
  </div>
 </div>
</template>
<script setup>
const { data, token } = useAuth

//Update user
const updateUser = async () => {
  //handle update user data
  //After update, You can refresh the user data with
  await getSession()
}
</script>

You can read more on the documentation Simple Nuxt Auth

How to Create OTP Input with Resend CountDown Timer in Livewire using Alphinejs and TailwindCss

Andrew Eze — Tue, 02 Apr 2024 13:27:58 +0000

If you're working with Laravel Livewire and need to create an OTP Input. Here is how to create a OTP input with a count down timer that has a resend button using Alphine.js and TailwindCss.

Design the Input Field

The code below creates a single input field for entering a single number. The number of fields depends on the length of the OTP code. The next part will show you how to display the number of input as required.

<form class="fi-form grid gap-y-6">
<input
type="tel"
maxlength="1"
class="border border-gray-500 w-10 h-10 text-center"
/>
@error('code')
  <p data-validation-error="" class="fi-fo-field-wrp-error-message text-sm text-danger-600 dark:text-danger-400">
   {{ $message }}
  </p>
@enderror
<button 
    style="--c-400:var(--primary-400);--c-500:var(--primary-500);--c-600:var(--primary-600);"
    class="fi-btn relative grid-flow-col items-center justify-center font-semibold outline-none transition duration-75 focus-visible:ring-2 rounded-lg fi-color-custom fi-btn-color-primary fi-size-md fi-btn-size-md gap-1.5 px-3 py-2 text-sm inline-grid shadow-sm bg-custom-600 text-white hover:bg-custom-500 focus-visible:ring-custom-500/50 dark:bg-custom-500 dark:hover:bg-custom-400 dark:focus-visible:ring-custom-400/50 fi-ac-action fi-ac-btn-action"
   type="submit"
>Verify</button>
</form>

Display Specific Number of Input fields

Here we use javascript (alphinejs) to specify number of boxes to display and use for loop to display them.

<form 
  class="fi-form grid gap-y-6"
  wire:submit="verify"
  x-data="otpForm()"
>
    <div style="--cols-default: repeat(1, minmax(0, 1fr));" class="grid grid-cols-[--cols-default] fi-fo-component-ctn gap-6">
        <div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]">
            <div data-field-wrapper="" class="fi-fo-field-wrp">

            <div class="grid gap-y-2">
                <input 
                    type="hidden" 
                    id="otp" 
                    wire:model="code"
                    required="required"
                    x-model="otp"
                >
            </div>
            <div class="grid gap-y-2">
                <div class="">
                    <div class="py-6 px-0 w-80 mx-auto text-center my-6">
                        <div class="flex justify-between">
                            <template x-for="(input, index) in length" :key="index">
                                <input
                                    type="tel"
                                    maxlength="1"
                                    class="border border-gray-500 w-10 h-10 text-center"
                                    :x-ref="index"
                                    x-on:input="handleInput($event)"
                                    x-on:paste="handlePaste($event)"
                                    x-on:keyup="handleDelete($event)"

                                />
                            </template>
                        </div>
                    </div>
                </div>

                @error('code')
                <p data-validation-error="" class="fi-fo-field-wrp-error-message text-sm text-danger-600 dark:text-danger-400">
                {{ $message }}
                </p>
                @enderror

            </div>
            <div class="grid gap-y-2">
                <div class="fi-form-actions">
                    <div class="fi-ac gap-3 grid grid-cols-[repeat(auto-fit,minmax(0,1fr))]">
                        <button 
                            style="--c-400:var(--primary-400);--c-500:var(--primary-500);--c-600:var(--primary-600);"
                            class="fi-btn relative grid-flow-col items-center justify-center font-semibold outline-none transition duration-75 focus-visible:ring-2 rounded-lg fi-color-custom fi-btn-color-primary fi-size-md fi-btn-size-md gap-1.5 px-3 py-2 text-sm inline-grid shadow-sm bg-custom-600 text-white hover:bg-custom-500 focus-visible:ring-custom-500/50 dark:bg-custom-500 dark:hover:bg-custom-400 dark:focus-visible:ring-custom-400/50 fi-ac-action fi-ac-btn-action"
                            type="submit"
                            x-on:click="$wire.code=document.getElementById('otp').value"
                        >
                            Verify
                        </button>
                    </div>
                </div>
            </div>

            </div>
        </div>

    </div> 
    </div>  
    </form>

    @push('scripts')
    <script>
        function otpForm() {
            return {
                    length: 7,
                    otp: '',

                    handleInput(e) {

                        const input = e.target;

                        this.otp = Array.from(Array(this.length), (element, i) => {
                            let ref = document.querySelector('[x-ref="' + i + '"]');
                            return ref.value || '';
                        }).join('');

                        if (input.nextElementSibling && input.value) {
                            input.nextElementSibling.focus();
                            input.nextElementSibling.select();
                        }
                    },

                    handlePaste(e) {
                        const paste = e.clipboardData.getData('text');
                        this.otp = paste;

                        const inputs = Array.from(Array(this.length));

                        inputs.forEach((element, i) => {
                            let ref = document.querySelector('[x-ref="' + i + '"]');
                            ref.value = paste[i] || '';
                        });
                    },

                    handleDelete(e) {
                        let key = e.keyCode || e.charCode;
                        if(key == 8 || key == 46) {
                            currentRef = e.target.getAttribute('x-ref');
                            const previous = parseInt(currentRef) - 1;

                            let ref = document.querySelector('[x-ref="' + previous + '"]');
                            ref && ref.focus();
                        }
                    },
            }
        }
</script>
@endpush

We passed the javascript function to the form as x-data. This will allow us access all the variables and functions inside the otpForm() function inside the form element.
The OtpForm function contains
the length variable, that will show the number of boxes to display.
handleInput function concatenates otp codes entered in all the boxes and stores it to the otp variable.
handlePaste function helps to transfer copied otp content from clipboard to the boxes.
handleDelete function helps handle deleting of contents of the otp boxes and refocuses the cursor.

We used :x-ref to uniquely identify each input box and then used document.querySelector to retrieve the value of each of the boxes based on their position.

We also added a hidden field to store the otp code before submitting to our model.

<input 
  type="hidden" 
  id="otp" 
  wire:model="code"
  required="required"
  x-model="otp"
>

Add Resend Button with CountDown Timer

Let's add a resend button with countdown timer.

            <div class="grid gap-y-2 text-center" x-data="otpSend(80)" x-init="init()">
            <template  x-if="getTime() <= 0">
            <form wire:submit="resendOtp">
                <button
                    type="submit"
                >
                    Resend OTP
                    <div wire:loading>
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
                                <circle fill="#FF156D" stroke="#FF156D" stroke-width="15" r="15" cx="40" cy="100">
                                    <animate attributeName="opacity" calcMode="spline" dur="2" values="1;0;1;" keySplines=".5 0 .5 1;.5 0 .5 1" repeatCount="indefinite" begin="-.4">
                                    </animate>
                                </circle>
                                <circle fill="#FF156D" stroke="#FF156D" stroke-width="15" r="15" cx="100" cy="100">
                                    <animate attributeName="opacity" calcMode="spline" dur="2" values="1;0;1;" keySplines=".5 0 .5 1;.5 0 .5 1" repeatCount="indefinite" begin="-.2">
                                    </animate>
                                </circle>
                                    <circle fill="#FF156D" stroke="#FF156D" stroke-width="15" r="15" cx="160" cy="100">
                                        <animate attributeName="opacity" calcMode="spline" dur="2" values="1;0;1;" keySplines=".5 0 .5 1;.5 0 .5 1" repeatCount="indefinite" begin="0">
                                        </animate>
                                </circle>
                            </svg>

                            </div>
                </button>
                <input type="hidden" wire:model="logid">
            </form>
            </template>
            <template x-if="getTime() > 0">
            <small>
                Resend OTP in 
                <span x-text="formatTime(getTime())"></span>
            </small>
            </template>
            </div>

<script>
function otpSend(num) {
            const milliseconds = num * 1000 //60 seconds
            const currentDate = Date.now() + milliseconds
            var countDownTime = new Date(currentDate).getTime()
            let interval;

            return {
                countDown: milliseconds,
                countDownTimer: new Date(currentDate).getTime(),
                intervalID: null,
                init(){
                    if (!this.intervalID ) {
                        this.intervalID = setInterval(() => {
                            this.countDown = this.countDownTimer - new Date().getTime();
                        }, 1000);
                    }

                },
                getTime(){
                    if(this.countDown < 0){
                        this.clearTimer()
                    }
                    return this.countDown;
                },
                formatTime(num){

                    var date = new Date(num);
                    return new Date(this.countDown).toLocaleTimeString(navigator.language, {
                        minute: '2-digit',
                        second:'2-digit'
                    });

                },
                clearTimer() {
                    clearInterval(this.intervalID);
                }

            }
        }

        </script>

The otpSend(num) function uses a countdown timer to only display the resend button after specified time num in seconds.

You can see the full source code on github here

How to Run a Python Flask App in Docker with Gunicorn, Nginx, Redis, Celery and Crontab

Andrew Eze — Thu, 10 Aug 2023 14:09:02 +0000

If you have built a Python Flask application that has need for Redis and cron jobs and you're looking to host your application using Docker, this post will provide you with how to set up your app to run smoothly using Nginx as reverse webserver proxy and Gunicorn as app server.

This post assumes you know how to build applications using Python Flask. Also, for this post, I assumed using a remote database server (MySQL)

You can check my previous post on how Build a User Authentication API using Python Flask and MySQL

Challenges with docker
There can only be one CMD instruction in a Dockerfile. Considering our application uses Celery and Redis to handle queue and also requires running cron jobs. Running a background process to keep running your jobs in a single Docker container can be tricky.

You can use an entrypoint.sh script

FROM python:3.12-rc-alpine
COPY app_process app_process
COPY bin/crontab /etc/cron.d/crontab 
RUN chmod +x /etc/cron.d/crontab
RUN crontab /etc/cron.d/crontab
COPY start.sh start.sh
CMD /start.sh

Start.sh script could be

#!/bin/bash

# turn on bash's job control
set -m

# Start the primary process and put it in the background
gunicorn --bind 0.0.0.0:5000 wsgi:app --log-level=debug --workers=2 &

# cron
cron -f &

#celery
celery -A myapp.celery worker --loglevel=INFO

# now we bring the primary process back into the foreground
# and leave it there
fg %1

You can chain multiple commands to start all services in a single


CMD gunicorn --bind 0.0.0.0:5000 wsgi:app --log-level=debug --workers=2 & cron -f & celery -A myapp.celery worker --loglevel=INFO

You can also use supervisord to manage the processes.

# syntax=docker/dockerfile:1
FROM python:3.12-rc-alpine
RUN apt-get update && apt-get install -y supervisor
RUN mkdir -p /var/log/supervisor
COPY supervisord.conf /etc/supervisor/conf.d/supervisord.conf
COPY app_process app_process
COPY bin/crontab /etc/cron.d/crontab 
RUN chmod +x /etc/cron.d/crontab
RUN crontab /etc/cron.d/crontab
CMD ["/usr/bin/supervisord"]

Your supervisord config could be something like

[supervisord]
nodaemon=true
user=root

[program:celeryworker]
stdout_logfile=/dev/stdout
stdout_logfile_maxbytes=0
stderr_logfile=/dev/stderr
stderr_logfile_maxbytes=0
command=celery -A myapp.celery worker --loglevel=INFO
autostart=true
autorestart=true

[program:myapp_gunicorn]
command=gunicorn --bind 0.0.0.0:5000 wsgi:app --log-level=debug --workers=2
autostart=true
autorestart=true
stdout_logfile=/dev/stdout
stdout_logfile_maxbytes=0
stderr_logfile=/dev/stderr
stderr_logfile_maxbytes=0

[program:cron]
command = cron -f -L 15
autostart=true
autorestart=true
stdout_logfile=/var/log/supervisor/cron.log
stdout_logfile=/dev/stdout
stdout_logfile_maxbytes=0

The issue with any of the above approach is you will be responsible for monitoring them if any service fails and tries to recover. For example crontab could stop running while the main app is working, you have to handle how to recover the crontab without restarting the whole container.

It’s best practice to separate areas of concern by using one service per container.

Using Multiple Containers.

You can use multiple containers to run the different services. In this solution I used

one container for the Flask App,
one container for the redis service
one container for the cronjob and Celery (Queue service) using Supervisord to manage celery.

Note: You decide to further move the celery (queue service) into a separate container if you want to.

The DockerFile for Flask App

FROM python:3.11.4-slim-bullseye

# set work directory
WORKDIR /app

# set environment variables
ENV PYTHONDONTWRITEBYTECODE 1
ENV PYTHONUNBUFFERED 1

ARG UID=1000
ARG GID=1000

RUN apt-get update \
  && apt-get install -y --no-install-recommends build-essential default-libmysqlclient-dev default-mysql-client curl libpq-dev pkg-config \
  && rm -rf /var/lib/apt/lists/* /usr/share/doc /usr/share/man \
  && apt-get clean

# RUN useradd -m python
# RUN chown -R python:python /app

# USER python


# If you have a requirement.txt file
COPY requirements/main.txt requirements/main.txt

# install dependencies
RUN pip install --upgrade pip
RUN pip install -r requirements/main.txt

COPY . /app/

RUN pip install -e .


CMD ["gunicorn", "--bind", "0.0.0.0:5000", "--worker-tmp-dir", "/dev/shm", "--workers", "2", "--worker-class", "gevent", "--worker-connections", "1000", "wsgi:app", "--log-level", "debug"]

Docker File for Crontab and Celery

FROM python:3.11.4-slim-bullseye

# set work directory
WORKDIR /cronapp/


# set environment variables
ENV PYTHONDONTWRITEBYTECODE 1
ENV PYTHONUNBUFFERED 1

ARG UID=1000
ARG GID=1000

RUN apt-get update \
  && apt-get install -y --no-install-recommends supervisor build-essential default-libmysqlclient-dev default-mysql-client curl cron libpq-dev pkg-config \
  && rm -rf /var/lib/apt/lists/* /usr/share/doc /usr/share/man \
  && apt-get clean

# RUN useradd -m python
# RUN chown -R python:python /app
# USER python


COPY requirements/main.txt requirements/main.txt

# install dependencies
RUN pip install --upgrade pip
RUN pip install -r requirements/main.txt

COPY . /cronapp/

RUN pip install -e .

# Setup cronjob
RUN touch /var/log/cron.log 

# Copying the crontab file 
COPY cron/bin/crontab /etc/cron.d/crontab 
RUN chmod +x /etc/cron.d/crontab


# run the crontab file
RUN crontab /etc/cron.d/crontab

RUN mkdir -p /var/log/supervisor

COPY services/cron/bin/supervisord.conf /etc/supervisor/conf.d/supervisord.conf

# CMD ["/usr/bin/supervisord", "-n"]

CMD cron -f & /usr/bin/supervisord -n

The Supervisord config

[supervisord]
nodaemon=true
user=root

[program:celeryworker]
stdout_logfile=/dev/stdout
stdout_logfile_maxbytes=0
stderr_logfile=/dev/stderr
stderr_logfile_maxbytes=0
command=celery -A myapp.celery worker --loglevel=INFO
autostart=true
autorestart=true

[program:myapp_gunicorn]
command=gunicorn --bind 0.0.0.0:5000 wsgi:app --log-level=debug --workers=4
autostart=true
autorestart=true
stdout_logfile=/dev/stdout
stdout_logfile_maxbytes=0
stderr_logfile=/dev/stderr
stderr_logfile_maxbytes=0

Sample crontab

SHELL=/bin/bash
PATH=/usr/local/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin

# run notify users every day at 1:05AM
5 1 * * *  flask --app myapp notify-users >> /var/log/cron.log 2>&1

For this approach to work, your app has to be structured to use the package pattern. (This is same in the previous post).

This way, you can run a function from the command line on your app like below:

flask --app myapp notify-users

Remember to specify a function to run on command line by using the @app.cli.command to create custom commands

Example:

from myapp.users import users
from myapp import app
from myapp.models.user import User
from myapp.queue.sendmail import send_email_to_user

@app.cli.command('notify-users')
def notify_users():
    offset = 0
    limit = 100
    users = User.filter(User.is_verified == 1).order_by(User.created_at.desc()).limit(limit).offset(offset)

    for user in users:
        send_email_to_user(user)

Nginx Dockerfile

FROM nginx:1.23-alpine

RUN rm /etc/nginx/nginx.conf
COPY nginx.conf /etc/nginx/

RUN rm /etc/nginx/conf.d/default.conf
COPY myapp.conf /etc/nginx/conf.d/


CMD ["nginx", "-g", "daemon off;"]

You can now use docker-compose to manage all containers

Sample docker-compose.yml

version: "3.8"

services:
  backend:
    container_name: "app"
    build:
      context: .
      args:
        - "UID=-1000"
        - "GID=-1000"
        - "FLASK_DEBUG=false"
    volumes:
      - .:/app
    ports:
      - "5000:5000"
    env_file:
      - ".env"
    restart: "-unless-stopped"
    stop_grace_period: "2s"
    tty: true
    deploy:
      resources:
        limits:
          cpus: "-0"
          memory: "-0"
    depends_on:
      - "redis"
    profiles: ["myapp"]

  cron:
    container_name: "cron"
    build:
      context: .
      dockerfile: ./services/cron/Dockerfile
      args:
        - "UID=-1000"
        - "GID=-1000"
    env_file:
      - ".env"
    restart: "-unless-stopped"
    stop_grace_period: "2s"
    tty: true
    deploy:
      resources:
        limits:
          cpus: "-0"
          memory: "-0"
    depends_on:
      - "redis"
    volumes:
      - .:/cronapp/
    profiles: ["myapp"]

  redis:
    deploy:
      resources:
        limits:
          cpus: "-0"
          memory: "-0"
    image: "redis:7.0.5-bullseye"
    restart: "-unless-stopped"
    stop_grace_period: "3s"
    command: "redis-server --bind redis --maxmemory 256mb --maxmemory-policy allkeys-lru --appendonly yes"
    volumes:
      - "./redis:/data"
    profiles: ["redis"]

  nginx:
    container_name: "nginx"
    build:
      context: ./services/nginx
    restart: "-unless-stopped"
    stop_grace_period: "2s"
    tty: true
    deploy:
      resources:
        limits:
          cpus: "-0"
          memory: "-0"
    ports:
      - "80:80"
    depends_on:
      - "backend"
    volumes:
      - .:/nginx/
    profiles: ["nginx"]

You can now start your application and all services by running

docker compose up --detach --build app redis cron nginx

Building a User Authentication API using Python Flask and MySQL

Andrew Eze — Tue, 10 Jan 2023 18:03:24 +0000

Recently, I decided to learn Python, as part of learning I built a remote jobs (remote4africa) platform using Python Flask. In this post, I will show you step by step process for building a user authentication API using Python (Flask) and MySQL. The application will allow users to register and verify their email through an OTP Code sent to their email.

Note: This post assumes you have an understanding of Python Flask and MySQL.

Flask is a micro web framework written in Python. It allows python developers to build APIs or full web app (frontend and Backend).

When building a user authentication system, you should consider security and ease of use.
On security, you should not allow users to use weak passwords, especially if you are working on a critical application. You should also encrypt the password before storing in your database.

To build this I used the following dependencies:
cerberus: For validation
alembic: For Database Migration and Seeding
mysqlclient: For connecting to MySQL
Flask-SQLAlchemy, flask-marshmallow and marshmallow-sqlalchemy: For database object relational mapping
pyjwt: For JWT token generation
Flask-Mail: For email sending
celery and redis: For queue management

So let's get started

Step 1: Install and Set up your Flask Project.

You can follow the guide at Flask Official Documentation site or follow the steps below. Please ensure you have python3 and pip installed in your machine.

$ mkdir flaskauth
$ cd flaskauth
$ python3 -m venv venv
$ . venv/bin/activate
$ pip install Flask # pip install requirements.txt

You can install your all the required packages together with Flask at once using a requirements.txt file. (This is provided in the source code).

The Python Flask App folder Structure
It is always advisable to use the package pattern to organise your project.

/yourapplication
    /yourapplication
        __init__.py
        /static
            style.css
        /templates
            layout.html
            index.html
            login.html
            ...

Add a pyproject.toml or setup.py file next to the inner yourapplication folder with the following contents:

pyproject.toml

[build-system]
requires = ["setuptools"]
build-backend = "setuptools.build_meta"

[project]
name = "yourapplication"
description = "yourapplication description"
readme = "README.rst"
version="1.0.0"
requires-python = ">=3.11"
dependencies = [
    "Flask",
    "SQLAlchemy",
    "Flask-SQLAlchemy", 
    "wheel",
    "pyjwt",
    "datetime",
    "uuid",
    "pytest",
    "coverage",
    "python-dotenv",
    "alembic",
    "mysqlclient",
    "flask-marshmallow",
    "marshmallow-sqlalchemy",
    "cerberus",
    "Flask-Mail",
    "celery",
    "redis"
]

setup.py

from setuptools import setup

setup(
    name='yourapplication',
    packages=['yourapplication'],
    include_package_data=True,
    install_requires=[
        'flask',
    ],
    py_modules=['config']
)

You can then install your application so it is importable:

$ pip install -e .

You can use the flask command and run your application with the --app option that tells Flask where to find the application instance:

$ flask –app yourapplication run

In our own case the application folder looks like the following:

/flaskauth
    /flaskauth
        __init__.py
        /models
        /auth
        /controllers
        /service
        /queue
        /templates
    config.py
    setup.py
    pyproject.toml
    /tests
    .env
    ...

Step 2: Set up Database and Models

Since this is a simple application, we just need few tables for our database:

users
countries
refresh_tokens

We create our baseModel models/base_model.py

from flask_sqlalchemy import SQLAlchemy
from flask_marshmallow import Marshmallow
from sqlalchemy.ext.declarative import declared_attr
from flaskauth import app

_PLURALS = {"y": "ies"}

db = SQLAlchemy() 
ma = Marshmallow(app)


class BaseModel(object):
    @declared_attr
    def __tablename__(cls):
        name = cls.__name__
        if _PLURALS.get(name[-1].lower(), False):
            name = name[:-1] + _PLURALS[name[-1].lower()]
        else:
            name = name + "s"
        return name

For Users table, we need email, first_name, last_name, password and other fields shown below. So we create the user and refresh token model models/user.py

from datetime import datetime
from flaskauth.models.base_model import BaseModel, db, ma
from flaskauth.models.country import Country

class User(db.Model, BaseModel):
    __tablename__ = "users"
    id = db.Column(db.BigInteger, primary_key=True)
    email = db.Column(db.String(120), unique=True, nullable=False)
    password = db.Column(db.String(200), nullable=True)
    first_name = db.Column(db.String(200), nullable=False)
    last_name = db.Column(db.String(200), nullable=False)
    avatar = db.Column(db.String(250), nullable=True)
    country_id = db.Column(db.Integer, db.ForeignKey('countries.id', onupdate='CASCADE', ondelete='SET NULL'),
        nullable=True)
    is_verified = db.Column(db.Boolean, default=False, nullable=False)
    verification_code = db.Column(db.String(200), nullable=True)
    created_at = db.Column(db.DateTime, nullable=False, default=datetime.utcnow)
    updated_at = db.Column(db.DateTime, nullable=True, onupdate=datetime.utcnow)
    deleted_at = db.Column(db.DateTime, nullable=True)
    country = db.relationship('Country', backref=db.backref('users', lazy=True))
    refresh_tokens = db.relationship('RefreshToken', backref=db.backref('users', lazy=True))


class RefreshToken(db.Model, BaseModel):
    __tablename__ = "refresh_tokens"
    id = db.Column(db.BigInteger, primary_key=True)
    token = db.Column(db.String(200), unique=True, nullable=False)
    user_id = db.Column(db.BigInteger, db.ForeignKey(User.id, onupdate='CASCADE', ondelete='CASCADE'),
        nullable=False)
    expired_at = db.Column(db.DateTime, nullable=False)
    created_at = db.Column(db.DateTime, nullable=False, default=datetime.utcnow)
    updated_at = db.Column(db.DateTime, nullable=True, onupdate=datetime.utcnow)

We also create the country model

from flaskauth.models.base_model import BaseModel, db
from flaskauth.models.region import Region

class Country(db.Model, BaseModel):
    __tablename__ = "countries"
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(100), unique=True, nullable=False)
    code = db.Column(db.String(3), unique=True, nullable=False)

For migration and seeding (creating the tables on the database and importing default data), we will use alembic. I will show you how to do this later.

Step 3: Create the `init.py` file

In this file we will initiate the flask application, establish database connection and also set up the queue. The init.py file makes Python treat directories containing it as modules.

import os
from flask import Flask, make_response, jsonify
from jsonschema import ValidationError



def create_app(test_config=None):
    app = Flask(__name__, instance_relative_config=True)

    if test_config is None:
        app.config.from_object('config.ProductionConfig')
    else:
        app.config.from_object('config.DevelopmentConfig')

    # ensure the instance folder exists
    try:
        os.makedirs(app.instance_path)
    except OSError:
        pass

    return app

app = create_app(test_config=None)

from flaskauth.models.base_model import db, BaseModel
db.init_app(app)

from flaskauth.models.user import User
from celery import Celery

def make_celery(app):
    celery = Celery(app.name)
    celery.conf.update(app.config["CELERY_CONFIG"])

    class ContextTask(celery.Task):
        def __call__(self, *args, **kwargs):
            with app.app_context():
                return self.run(*args, **kwargs)

    celery.Task = ContextTask
    return celery

celery = make_celery(app)

from flaskauth.auth import auth
from flaskauth.queue import queue
from flaskauth.controllers import user

app.register_blueprint(auth, url_prefix='/auth')
app.register_blueprint(queue)

@app.route("/hello")
def hello_message() -> str:
    return jsonify({"message": "Hello It Works"})


@app.errorhandler(400)
def bad_request(error):
    if isinstance(error.description, ValidationError):
        original_error = error.description
        return make_response(jsonify({'error': original_error.message}), 400)
    # handle other "Bad Request"-errors
    # return error
    return make_response(jsonify({'error': error.description}), 400)

This file loads our application by calling all the models and controllers needed.

The first function create_app is for creating a global Flask instance, it is the assigned to app

app = create_app(test_config=None)

We then import our database and base model from models/base_model.py

We are using SQLAlchemy as ORM for our database, we also use Marshmallow for serialization/deserialization of our database objects.
With the imported db, we initiate the db connection.

Next we use the make_celery(app) to initiate the celery instance to handle queue and email sending.

Next we import the main parts of our applications (models, controllers and other functions).

app.register_blueprint(auth, url_prefix='/auth')
app.register_blueprint(queue)

The above will register the queue and auth blueprints. In the auth blueprint we handle all routes that starts with /auth

@app.route("/hello")
def hello_message() -> str:
    return jsonify({"message": "Hello It Works"})

We will use this to test that our application is running.

The bad_request(error): function will handle any errors not handled by our application.

The Authentication

To handle authentication we will create a file auth/controllers.py
This file has the register function that will handle POST request. We also need to handle data validation to ensure the user is sending the right information.

from werkzeug.security import generate_password_hash, check_password_hash
from flaskauth import app
from flaskauth.auth import auth
from flask import request, make_response, jsonify, g, url_for
from datetime import timedelta, datetime as dt
from flaskauth.models.user import db, User, RefreshToken, UserSchema
from sqlalchemy.exc import SQLAlchemyError
from cerberus import Validator, errors
from flaskauth.service.errorhandler import CustomErrorHandler
from flaskauth.queue.email import send_email
from flaskauth.service.tokenservice import otp, secret, jwtEncode
from flaskauth.service.api_response import success, error

@auth.route("/register", methods=['POST'])
def register():
    schema = {
        'email': {
            'type': 'string',
            'required': True,
            'regex': '^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$'
        }, 
        'password': {
            'type': 'string', 
            'required': True,
            'min': 6

        },
        'first_name': {
            'type': 'string',
            'required': True,
            'min': 2

        },
        'last_name': {
            'type': 'string',
            'required': True, 
            'min': 2,
        }
    }

    v = Validator(schema, error_handler=CustomErrorHandler)
    form_data = request.get_json()
    args = request.args

    if(v.validate(form_data, schema) == False):
        return v.errors


    email = form_data['email']
    verification_code = otp(7)

    try:
        new_user = User(
            email= form_data['email'],
            password = generate_password_hash(form_data['password']),
            first_name= form_data['first_name'],
            last_name= form_data['last_name'],
            verification_code = secret(verification_code),
        )
        db.session.add(new_user)
        db.session.commit()

    except SQLAlchemyError as e:
        # error = str(e.__dict__['orig'])
        message = str(e)
        return error({}, message, 400)
        # return make_response(jsonify({'error': error}), 400)


    # Send verification email
    appName = app.config["APP_NAME"].capitalize()

    email_data = {
    'subject': 'Account Verification on ' + appName, 
    'to': email,
    'body': '',
    'name': form_data['first_name'],
    'callBack': verification_code,
    'template': 'verification_email'
    }

    send_email.delay(email_data)

    message = 'Registration Successful, check your email for OTP code to verify your account'
    return success({}, message, 200)

For validation I used cerberus. Cerberus is a python package that makes validation easy, it returns errors in json format when a validation fail. You can also provide custom error message like below.

from cerberus import errors

class CustomErrorHandler(errors.BasicErrorHandler):
    messages = errors.BasicErrorHandler.messages.copy()
    messages[errors.REGEX_MISMATCH.code] = 'Invalid Email!'
    messages[errors.REQUIRED_FIELD.code] = '{field} is required!'

The register function validates the data, if successful, we then generate an otp/verification code using the otp(total) function. We then hash the code for storage in database using the secret(code=None) function.

def secret(code=None):
    if not code:
        code = str(datetime.utcnow()) + otp(5)
    return hashlib.sha224(code.encode("utf8")).hexdigest()


def otp(total):
    return str(''.join(random.choices(string.ascii_uppercase + string.digits, k=total)))

We hash the user's password using the werkzeug.security generate_password_hash inbuilt function in flask and store the record in database. We are using SQLAlchemy to handle this.

After storing the user details, we schedule email to be sent immediately to the user.

# Send verification email
    appName = app.config["APP_NAME"].capitalize()

    email_data = {
    'subject': 'Account Verification on ' + appName, 
    'to': email,
    'body': '',
    'name': form_data['first_name'],
    'callBack': verification_code,
    'template': 'verification_email'
    }

    send_email.delay(email_data)

Then, we return a response to the user

message = 'Registration Successful, check your email for OTP code to verify your account'

return success({}, message, 200)

To handle responses, I created a success and error functions under services/api_response.py

from flask import make_response, jsonify

def success(data, message: str=None, code: int = 200):
    data['status'] = 'Success'
    data['message'] = message
    data['success'] = True

    return make_response(jsonify(data), code)


def error(data, message: str, code: int):
    data['status'] = 'Error'
    data['message'] = message
    data['success'] = False

    return make_response(jsonify(data), code)

We have other functions to handle email verification with OTP, login and refresh_token.

Verify account

@auth.route("/verify", methods=['POST'])
def verifyAccount():
    schema = {
        'otp': {
            'type': 'string', 
            'required': True,
            'min': 6

        },
    }
    v = Validator(schema, error_handler=CustomErrorHandler)
    form_data = request.get_json()

    if(v.validate(form_data, schema) == False):
        return v.errors

    otp = form_data['otp']
    hash_otp = secret(otp)
    user = User.query.filter_by(verification_code = hash_otp).first()

    if not user:
        message = 'Failed to verify account, Invalid OTP Code'
        return error({},message, 401)


    user.verification_code = None
    user.is_verified = True
    db.session.commit()


    message = 'Verification Successful! Login to your account'
    return success({}, message, 200)

Login user

This function handles POST request and validates the user's email and password. We first check if a record with the user's email exists, if not, we return an error response. If user's email exists, we check_password_hash function to check if the password supplied is valid.
If the password is valid, we call the authenticated function to generate and store a refresh token, generate a JWT token and the return a response with both tokens to the user.

@auth.route("/login", methods=['POST'])
def login():
    schema = {
        'email': {
            'type': 'string',
            'required': True,
            'regex': '^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$'
        }, 
        'password': {
            'type': 'string', 
            'required': True,
            'min': 6

        },
    }
    v = Validator(schema, error_handler=CustomErrorHandler)
    form_data = request.get_json()

    user = User.query.filter_by(email =  form_data['email']).first()

    if not user:
        message = 'Login failed! Invalid account.'
        return error({}, message, 401)

    if not check_password_hash(user.password, form_data['password']):
        message = 'Login failed! Invalid password.'
        return error({}, message, 401)

    return authenticated(user)


def authenticated(user: User):
    refresh_token = secret()

    try:
        refreshToken = RefreshToken(
                user_id = user.id,
                token = refresh_token,
                expired_at = dt.utcnow() + timedelta(minutes = int(app.config['REFRESH_TOKEN_DURATION']))
            )
        db.session.add(refreshToken)
        db.session.commit()

    except SQLAlchemyError as e:
        # error = str(e.__dict__['orig'])
        message = str(e)
        return error({}, message, 400)
    # del user['password']
    user_schema = UserSchema()
    data = {
        "token": jwtEncode(user),
        "refresh_token": refresh_token,
        "user": user_schema.dump(user)
    }
    message = "Login Successful, Welcome Back"
    return success(data, message, 200)

The response with the token will look like this:

{
    "expired_at": "Wed, 10 Jan 2024 16:43:48 GMT",
    "message": "Login Successful, Welcome Back",
    "refresh_token": "a5b5ehghghjk8truur9kj4f999bf6c01d34892df768",
    "status": "Success",
    "success": true,
    "token": "eyK0eCAiOiJDhQiLCJhbGciOI1NiJ9.eyJzdWIiOjEsImlhdCI6MTY3MzM2OTAyOCwiZXhwIjoxNjczOTczODI4fQ.a6fn7z8v9K5EmqZO7-J8VkY2u_Kdffh8aOVuWjTH138",
    "user": {
        "avatar": null,
        "country": {
            "code": "NG",
            "id": 158,
            "name": "Nigeria"
        },
        "country_id": 158,
        "created_at": "2022-12-09T16:00:48",
        "email": "user@example.com",
        "first_name": "John",
        "id": 145,
        "is_verified": true,
        "last_name": "Doe",
        "updated_at": "2022-12-10T12:17:45"
    }
}

The refresh token is useful for keeping a user logged without requesting for login information every time. Once JWT token is expired a user can use the refresh token to request a new JWT token. This can be handled by the frontend without asking the user for login details.

@auth.route("/refresh", methods=['POST'])
def refreshToken():
    schema = {
        'refresh_token': {
            'type': 'string',
            'required': True,
        },
    }
    v = Validator(schema, error_handler=CustomErrorHandler)
    form_data = request.get_json()
    now = dt.utcnow()
    refresh_token = RefreshToken.query.filter(token == form_data['refresh_token'], expired_at >= now).first()

    if not refresh_token:
        message = "Token expired, please login"
        return error({}, message, 401)

    user =  User.query.filter_by(id = refresh_token.user_id).first()

    if not user:
        message = "Invalid User"
        return error({}, message, 403)

    data = {
        "token": jwtEncode(user),
        "id": user.id
    }
    message = "Token Successfully refreshed"
    return success(data, message, 200)

You can access the full source code on GitHub HERE

Step 4: Install and Run the application

You can run the application by executing the following on your terminal

flask --app flaskauth run

Ensure the virtual environment is active and you're on the root project folder when you run this.
Alternatively, you don't need to be in the root project folder to run the command if you installed the application using the command below

$ pip install -e .

To ensure email is delivering set up SMTP crediential in the .env file

APP_NAME=flaskauth
FLASK_APP=flaskauth
FLASK_DEBUG=True
FLASK_TESTING=False
SQLALCHEMY_DATABASE_URI=mysql://root:@localhost/flaskauth_db?charset=utf8mb4

MAIL_SERVER='smtp.mailtrap.io'
MAIL_USERNAME=
MAIL_PASSWORD=
MAIL_PORT=2525
MAIL_USE_TLS=True
MAIL_USE_SSL=False
MAIL_DEFAULT_SENDER='info@flaskauth.app'
MAIL_DEBUG=True

SERVER_NAME=
AWS_SECRET_KEY=
AWS_KEY_ID=
AWS_BUCKET=

JWT_DURATION=10080
REFRESH_TOKEN_DURATION=525600

Also, run the celery application to handle queue and email sending

celery -A flaskauth.celery worker --loglevel=INFO

Step 5: Run Database Migration and Seeding

We will use alembic package to handle migration. Alembic is already installed as part of our requirements. Also, see the source code for the migration files. We will run the following to migrate.

alembic upgrade head

You can use alembic to generate database migrations. For example, to create users table run

alembic revision -m "create users table"

This will generate a migration file, similar to the following:

"""create users table

Revision ID: 9d4a5cb3f558
Revises: 5b9768c1b705
Create Date: 2023-01-10 18:34:09.608403

"""
from alembic import op
import sqlalchemy as sa


# revision identifiers, used by Alembic.
revision = '9d4a5cb3f558'
down_revision = '5b9768c1b705'
branch_labels = None
depends_on = None


def upgrade() -> None:
    pass


def downgrade() -> None:
    pass

You can then edit it to the following:

"""create users table

Revision ID: 9d4a5cb3f558
Revises: None
Create Date: 2023-01-10 18:34:09.608403

"""
from alembic import op
import sqlalchemy as sa


# revision identifiers, used by Alembic.
revision = '9d4a5cb3f558'
down_revision = None
branch_labels = None
depends_on = None


def upgrade() -> None:
    op.create_table('users',
    sa.Column('id', sa.BigInteger(), nullable=False),
    sa.Column('email', sa.String(length=120), nullable=False),
    sa.Column('password', sa.String(length=200), nullable=True),
    sa.Column('first_name', sa.String(length=200), nullable=False),
    sa.Column('last_name', sa.String(length=200), nullable=False),
    sa.Column('avatar', sa.String(length=250), nullable=True),
    sa.Column('country_id', sa.Integer(), nullable=True),
    sa.Column('is_verified', sa.Boolean(), nullable=False),
    sa.Column('verification_code', sa.String(length=200), nullable=True),
    sa.Column('created_at', sa.DateTime(), nullable=False),
    sa.Column('updated_at', sa.DateTime(), nullable=True),
    sa.Column('deleted_at', sa.DateTime(), nullable=True),
    sa.ForeignKeyConstraint(['country_id'], ['countries.id'], onupdate='CASCADE', ondelete='SET NULL'),
    sa.PrimaryKeyConstraint('id'),
    sa.UniqueConstraint('email')
    )
    # ### end Alembic commands ###


def downgrade() -> None:
    op.drop_table('users')
    # ### end Alembic commands ###

You can also auto generate migration files from your models using the following:

alembic revision --autogenerate

Note: For auto generation to work, you have to import your app context into the alembic env.py file. See source code for example.

Conclusion

After completing the database migration, you can go ahead and test the app buy sending requests to http://localhost:5000/auth/register using Postman, remember to supply all the necessary data, example below:

{
    "email": "ade@example.com",
    "password": "password",
    "first_name": "Ade",
    "last_name": "Emeka"
    "country": "NG"
}

Let me know your thoughts and feedback below.

How to install pdf2htmlEX in Ubuntu 20.04

Andrew Eze — Mon, 30 Nov 2020 14:37:44 +0000

pdf2htmlEX is a tool that allows you to convert PDF to HTML without losing text or format. pdf2htmlEX renders PDF files in HTML, using modern Web technologies. It is very useful if you want to convert academic papers with lots of formulas and figures to HTML format

This post will show you how to install pdf2htmlEX on Ubuntu 20.04 LTS.

As at the time of writing this post pdf2htmlEX is no longer packaged by Debian/Ubuntu, you will need to install from the pdf2htmlEX Debian archives (*.deb).

To get started you will need to install the dependencies:

sudo apt update
sudo apt install -y libfontconfig1 libcairo2 libjpeg-turbo8

If you get error about unmet dependencies run the following to fix broken packages

sudo apt apt --fix-broken install

Download latest *.deb package from pdf2htmlEX repository

wget https://github.com/pdf2htmlEX/pdf2htmlEX/releases/download/v0.18.8.rc1/pdf2htmlEX-0.18.8.rc1-master-20200630-Ubuntu-bionic-x86_64.deb
sudo mv pdf2htmlEX-0.18.8.rc1-master-20200630-Ubuntu-bionic-x86_64.deb pdf2htmlEX.deb

Install the package

sudo apt install ./pdf2htmlEX.deb

It is very important that you use a (relative or absolute) path to the *.deb file. It is the ./ in front of the pdf2htmlEX.deb file name which tells apt install that it is supposed to install a local file rather than a package name in apt install's internal package database.

Alternatively you could use the following commands:

sudo dpkg -i pdf2htmlEX.deb
sudo apt install -f

Test your installation

pdf2htmlEX -v

You should see something like this:

pdf2htmlEX version 0.18.8.rc1
Copyright 2012-2015 Lu Wang <coolwanglu@gmail.com> and other contributors
Libraries: 
  poppler 0.89.0
  libfontforge (date) 20200314
  cairo 1.16.0
Default data-dir: /usr/local/share/pdf2htmlEX
Poppler data-dir: /usr/local/share/pdf2htmlEX/poppler
Supported image format: png jpg svg

How to install pdf2htmlEX in Ubuntu 18.0.4

Andrew Eze — Tue, 11 Feb 2020 15:48:32 +0000

This post will show you how to install pdf2htmlEX to work with poppler-0.62.0 (as installed from the Ubuntu 18.04 LTS package).

As at the time of writing this post pdf2htmlEX is no longer packaged by Debian/Ubuntu, you will need to compile pdf2htmlEX yourself.

To get started you will need to install the dependencies

sudo apt-get update

sudo apt-get install -y libpoppler-private-dev pkg-config cmake make gcc g++ 
libcairo-dev libspiro-dev libpng-dev libjpeg-dev libpoppler-dev libpango1.0- 
dev libfontforge-dev poppler-data openjdk-8-jre-headless libopenjp2-7-dev libopenjp2-7 libgdk-pixbuf2.0-dev libfontconfig1-dev poppler-utils

Download a copy of the repository

wget https://github.com/pdf2htmlEX/pdf2htmlEX/archive/v0.16.0-poppler-0.62.0-ubuntu-18.04.zip

Unzip and install

unzip v0.16.0-poppler-0.62.0-ubuntu-18.04.zip
cd pdf2htmlEX-0.16.0-poppler-0.62.0-ubuntu-18.04
./dobuild
./doinstall

If you encounter error about package not found like

pdf2htmlEX: error while loading shared libraries: libfontforge.so.4: cannot open shared object file: No such file or directory

Check if the package is installed, in this case libfontforge

$ dpkg -l | grep fontforge

You should see the following

  ii  fontforge            1:20170731~dfsg-1    amd64     font editor
  ii  fontforge-common     1:20170731~dfsg-1    all       font editor (common files)
  ii  libfontforge-dev     1:20170731~dfsg-1    amd64     font editor - runtime library (development files)
  ii  libfontforge2        1:20170731~dfsg-1    amd64     font editor - runtime library

If you don't see the package, install it. However, if you have installed the packages and still got the error, type the following to set the path.

export LD_LIBRARY_PATH=/usr/local/lib:$LD_LIBRARY_PATH

Cheers!

DEV Community: Andrew Eze

How to Handle Authentication in Nuxt with a Separate Backend API

I just created a post on easy way handle authentication in Nuxt with a Backend

Best Way to Handle Nuxt Auth with Backend API

Best Way to Handle Nuxt Auth with Backend API

How to Create OTP Input with Resend CountDown Timer in Livewire using Alphinejs and TailwindCss

Design the Input Field

Display Specific Number of Input fields

Add Resend Button with CountDown Timer

How to Run a Python Flask App in Docker with Gunicorn, Nginx, Redis, Celery and Crontab

Using Multiple Containers.

Building a User Authentication API using Python Flask and MySQL

Step 1: Install and Set up your Flask Project.

Step 2: Set up Database and Models

Step 3: Create the __init__.py file

The Authentication

Verify account

Login user

Step 4: Install and Run the application

Step 5: Run Database Migration and Seeding

Conclusion

How to install pdf2htmlEX in Ubuntu 20.04

How to install pdf2htmlEX in Ubuntu 18.0.4

Step 3: Create the `init.py` file