Forem: Hiram

Next.js middleware for supabase

Hiram — Wed, 29 Mar 2023 15:10:51 +0000

Mein kumpeln! It is time for another interesting snippet for Next.js v13. Lately I've been tinkering with this framework and Supabase and I have to say the integrations this BaaS offers are amazing. You definitely need to check out this firebase alternative.

Now regarding with the snippet I want to share with you it is related with the admin section I am building inside the portal. This allows you to validate the access before rendering the pages or access the api functions Next.js offers.

import { NextRequest, NextResponse } from "next/server";
import { createMiddlewareSupabaseClient } from "@supabase/auth-helpers-nextjs";

export async function middleware(req: NextRequest) {
  const adminPath = "/admin";
  const apiAdminPath = "/api/admin";

  const res = NextResponse.next();
  const supabase = createMiddlewareSupabaseClient({ req, res });
  const {
    data: { session },
  } = await supabase.auth.getSession();

  if (!session || session?.user.user_metadata?.role !== "admin") {
    if (req.nextUrl.pathname.startsWith(apiAdminPath)) {
      return new NextResponse(
        JSON.stringify({ message: "authorization failed" }),
        { status: 403, headers: { "Content-Type": "application/json" } }
      );
    } else if (req.nextUrl.pathname.startsWith(adminPath)) {
      const redirectUrl = req.nextUrl.clone();
      redirectUrl.pathname = "/";
      return NextResponse.redirect(redirectUrl);
    }
  }
}

export const config = {
  matcher: ["/api/admin/:path*", "/admin/:path*"],
};

// src/middleware.ts

You probably got an idea of what is happening here, but let's explain it step by step:

The matchers aka the folders (or pages/api): These are the routes on which this middleware is going to be applied. Any other routes under /user or /whatever paths are not going to be filtered. So you have the ability to define validations for every (sub)path you might have.

export const config = {
  matcher: ["/api/admin/:path*", "/admin/:path*"],
};

The validation, in my case I leveraged it from supabase and its helper library to retrieve the active session as shown here:

  const supabase = createMiddlewareSupabaseClient({ req, res });
  const {
    data: { session },
  } = await supabase.auth.getSession();

  if (!session || session?.user.user_metadata?.role !== "admin") {
    // put your validations here  
  }

This is something you can easily swap with your custom auth provider.

The next() handler, known as the next step in the middleware flow, here we are asking the type of route in order to response with a redirect or a json.

    if (req.nextUrl.pathname.startsWith(apiAdminPath)) {
          return new NextResponse(
            JSON.stringify({ message: "authorization failed" }),
            { status: 403, headers: { "Content-Type": "application/json" } }
      );
    } else if (req.nextUrl.pathname.startsWith(adminPath)) {
      const redirectUrl = req.nextUrl.clone();
      redirectUrl.pathname = "/";
      return NextResponse.redirect(redirectUrl);
    }

It is important to highlight that I am responding explicitly to what is causing failed validations. Redirect for browser navigation and JSON for API routes. The next() valid step is implicit when you are not returning it by using the res variable. By adding the return res; statement at the end of the function you will cause the same flow as if not defined.

As usual, you should stick to the official docs, for next.js you have it here: https://nextjs.org/docs/advanced-features/middleware

For supabase and its helper library just follow this link: https://supabase.com/docs/guides/auth/auth-helpers/nextjs

I hope you find it useful and don't hesitate to leave your comments, happy coding pals! 😎

Vue 3 is amazing!

Hiram — Thu, 14 Jul 2022 17:06:16 +0000

Guys, recently I had to take a Vue 3 course so I can start working with composition API among other tools and I had to say Vue is always surprising me. I liked the way you can build up your components with the composition API. I also got to know Pinia, the new state management for Vue and is amazing as well. Vuex was already easy to integrate and use but with Pinia is mindblowing 🤯.

I think it is good you have the options and composition Apis available. I hope I can share more insights once I get used to work with the new API, for sure it should have caveats we should be aware of. Feel free to make suggestions or share your thoughts about Vue3.

p.d. vue mugiwara's jolly roger looks terrific

Getting ready for new ventures

Hiram — Tue, 01 Feb 2022 06:06:34 +0000

I remember the mix of feelings when I launched my first project. I made what I considered at the time enough promotion, sadly it didn't take off at the end. First lesson learned, having a decent product it's only the beginning of the journey (flashback ends).

After more failures than successes, I am still here, getting ready for the the next rodeos. Getting ready for the ups and downs, exhausted at times when you feel your brain is going to explode processing new information. But pushing the boundaries it's always satisfying, the experiments are meant to enlighten you and shed some light to your path.

If you are a self learner it's very important to stick to this. Sooner than later this process is going to payoff. You don't know when or how, but that's the way everything fits in the future (luck is a cheap description as well). Keep coding, keep doing, keep failing but keep learning.

Let's hope for the better and get ready for the unknown...

Generate server block (virtual hosts) for nginx dynamically

Hiram — Mon, 17 Jan 2022 22:01:56 +0000

Hey pals, I will show you how to create a basic shell script so you can dynamically generate nginx virtual hosts or "subdomains" for every site you want to put online. There are two examples, one for your node or whatever app that runs locally, the second is for static websites.

Reversed proxy subdomain example

If you are running a node app on a specific port this basic example will help you to create and connect your site. The following is the stub file we will use subdomain.stub:

server {
        listen 80;
        listen [::]:80;

        index index.html index.htm;

        server_name {{DOMAIN}}.yoursite.com;

        location / {
                proxy_pass http://localhost:{{PORT}};
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;
        }
}

Now let's create the generator.sh shell script:

#!/bin/bash

SED=$(which sed)
CURRENT_DIR=$(dirname $0)

# check the domain is valid!
PATTERN="^(([a-zA-Z]|[a-zA-Z][a-zA-Z0-9\-]*[a-zA-Z0-9])\.)*([A-Za-z]|[A-Za-z][A-Za-z0-9\-]*[A-Za-z0-9])$"
if [[ "$1" =~ $PATTERN ]]; then
  DOMAIN=$(echo $1 | tr '[A-Z]' '[a-z]')
  echo "Creating hosting for:" $DOMAIN
else
  echo "invalid domain name"
  exit 1
fi

CONFIG="$CURRENT_DIR/$DOMAIN.yoursite.com"
cp $CURRENT_DIR/subdomain.stub $CONFIG
$SED -i "s/{{DOMAIN}}/$DOMAIN/g" $CONFIG
$SED -i "s/{{PORT}}/$2/g" $CONFIG

echo "The subdomain has been successfully generated"

cp $CONFIG "/etc/nginx/sites-available"
ln -s "/etc/nginx/sites-available/$DOMAIN.yoursite.com" "/etc/nginx/sites-enabled"

echo "The subdomain has been moved to nginx to sites-available and symlinked to sites-enabled"

In your terminal you run the command as follows: ./generator.sh DOMAIN PORT

In order to run this script you have to make it executable with this command: chmod u+x generator.sh otherwise you won't be able to execute it.

Now it's ready to run, let me explain what it does:

Stores SED as a variable
Stores the current location
Creates a domain pattern and the compares it with the 1st parameter (DOMAIN)
Defines CONFIG location, then clones the subdomain.stub file into the previous definition
Replaces the {{DOMAIN}} value inside the cloned configuration
Replaces the {{PORT}} value inside the cloned configuration

At this point our virtual host is ready to be published

Copies the new virtual host file into "/etc/nginx/sites-available" which is the folder for every available site in nginx
Then creates a symlink from the previous location to /etc/nginx/sites-enabled which is the folder for every enabled site in nginx

Once this is done you need to ensure virtual hosts definitions are valid. You can do this by running nginx -t in your terminal. If everything went well now you only need to reload/restart nginx so changes can be applied. nginx service reload/restart.

Static site subdomain example

This example is for static websites (not SSR)

subdmain.stub:

server {
        listen 80;
        listen [::]:80;

        root /var/www/{{DOMAIN}};
        index index.html index.htm index.nginx-debian.html;

        server_name {{DOMAIN}}.yoursite.com;

        location / {
                try_files $uri $uri/ /index.html = 404; #This line redirects to index for correct react router usage
        }
}

Then we use basically the same generator.sh script than before:

#!/bin/bash

SED=$(which sed)
CURRENT_DIR=$(dirname $0)

# check the domain is valid!
PATTERN="^(([a-zA-Z]|[a-zA-Z][a-zA-Z0-9\-]*[a-zA-Z0-9])\.)*([A-Za-z]|[A-Za-z][A-Za-z0-9\-]*[A-Za-z0-9])$"
if [[ "$1" =~ $PATTERN ]]; then
  DOMAIN=$(echo $1 | tr '[A-Z]' '[a-z]')
  echo "Creating hosting for:" $DOMAIN
else
  echo "invalid domain name"
  exit 1
fi

CONFIG="$CURRENT_DIR/$DOMAIN.yoursite.com"
cp $CURRENT_DIR/subdomain.stub $CONFIG
$SED -i "s/{{DOMAIN}}/$DOMAIN/g" $CONFIG

echo "The subdomain has been successfully generated"

cp $CONFIG "/etc/nginx/sites-available"
ln -s "/etc/nginx/sites-available/$DOMAIN.yoursite.com" "/etc/nginx/sites-enabled"

echo "The subdomain has been moved to nginx to sites-available and symlinked to sites-enabled"

The only difference is that we no longer require a PORT, so you will run the command like this: ./generator.sh ${DOMAIN} (Do not forget to make the script executable)

From here the sky is the limit my friend, you could easily create your own stubs/snippets with many variables as needed. Also they only contain the minimum requirements to be served by nginx, have fun adding more specifications.

BONUS!! 🤯

If you read my previous post Easy node apps deployment with PM2 let me show you how you could integrate this virtual host generator to a pm2 deployment set up file ecosystem.config.js:

module.exports = {
  deploy: {
    production: {
      user: USER,
      host: HOST,
      ref: BRANCH,
      repo: REPO,
      path: PATH,
      'post-setup': `npm install && cd setup/ && chmod u+x generator.sh && ./generator.sh ${DOMAIN}`
    }
  }
};

Now you only have to create a /setup folder inside your project with the subdomain stub as well as the generator script and that's it. Ready to be executed after setup.

Easy node apps deployment with PM2

Hiram — Tue, 11 Jan 2022 20:03:28 +0000

This is the first post of a serie of helpful snippets to deploy node and react apps.

For this practice we will use pm2 which is a process manager for node.js

The following are all the considerations you need to take in order to be able to deploy with pm2:

Install pm2 dependency globally on the host you are running the deployment script
Add your host's public SSH key into the remote server
Manage the connection to your repository from the remote server

The following is the actual code you will have to define in order to install the node app on your remote server, PM2 calls it ecosystem.config.js file:

module.exports = {
  apps : [],
  // Deployment Configuration
  deploy : {
    production : {
       "user" : "root",
       "host" : ["my-remote-server.xyz", "...",],
       "ref"  : "origin/master",
       "repo" : "git@github.com:username/repository.git",
       "path" : "/var/www/my-repository",
       "post-setup" : "npm install"
    }
  }
};

Once you defined this ecosystem file you should be able to run it using the following command:

pm2 deploy ecosystem.config.js production setup

The previous command will download the ref of your repo into the specified path, it will run as user on the specified host(s), and finally it will run the post-setup commands.

And that's it, now you can install your projects wherever you need. There exists a pre-setup command as well in case you need to make some actions before deployment. Here is the official docs

pm2 has many more features that we will discuss in next posts. Also, this script is not limited to node apps only, coming on examples will show you how to deploy a react app from deployment to serve, setting env parameters and building new releases after PR's using Github Actions, basically achieving zero downtime deployments pipelines.

React FullCalendar snippet

Hiram — Mon, 29 Nov 2021 02:58:15 +0000

This was originally published on https://eichgi.hashnode.dev/react-fullcalendar-snippet

Hey folks, the following snippet is a basic example of what you can achieve with FullCalendar library for React. I hope you find my appointments calendar interesting, so let's dive into.

Here you have the react component full calendar docs:
https://fullcalendar.io/docs/react

Once you have installed the package let's focus on the component:

<FullCalendar
              ref={calendar}
              fixedWeekCount={false}
              height={'auto'}
              locale={esLocale}
              plugins={[dayGridPlugin, interactionPlugin]}
              initialView={setCalendarViewByWidth()}
              headerToolbar={{
                start: 'prev today next',
                center: 'title',
                end: 'newAppointment'
              }}
              footerToolbar={{
                center: 'toggleMonth toggleWeek toggleDay',
              }}
              customButtons={{
                newAppointment: {
                  text: 'Nueva cita',
                  click: () => {
                    dateClickHandler();
                  },
                },
                toggleDay: {
                  text: 'Hoy',
                  click: () => {
                    calendar.current.getApi().changeView('dayGridDay');
                  }
                },
                toggleWeek: {
                  text: 'Semana',
                  click: () => {
                    calendar.current.getApi().changeView('dayGridWeek');
                  }
                },
                toggleMonth: {
                  text: 'Mes',
                  click: () => {
                    calendar.current.getApi().changeView('dayGridMonth')
                  }
                },
              }}
              dateClick={e => dateClickHandler(e)}
              events={appointments}
              datesSet={async (dateInfo) => {
                await getEvents(dateInfo.startStr.split('T')[0], dateInfo.endStr.split('T')[0]);
              }}
              eventsSet={(events => {
                console.log('Events set: ', events);
              })}
              eventClick={e => eventsHandler(e)}
            />

I will describe the props described in the snippet. These are the very basics functionalities you might need for a full dynamic calendar.

Make a reference for you calendar, it might be handy for working directly with the API

const calendar = useRef(null);

I set my calendar in spanish by doing this, there are plenty of languages available, just dig into the docs to find the desired one.

import esLocale from '@fullcalendar/core/locales/es';

In order to interact with the events and have this dayGrid/monthGrid view it is important that you import the following plugins

import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';

You can customize the default buttons and their order by defining the following props. You can as well create your own buttons and defined them inside the toolbar as follows:

headerToolbar={{
                start: 'prev today next',
                center: 'title',
                end: 'newAppointment'
              }}
footerToolbar={{
                center: 'toggleMonth toggleWeek toggleDay',
              }}

As mentioned previously, this is the way you define custom buttons and their events:

customButtons={{
                newAppointment: {
                  text: 'Nueva cita',
                  click: () => {
                    dateClickHandler();
                  },
                },
               ...
              }}

For every click inside the calendar you will set the event this way (where e contains the date information regarding the clicked date):

dateClick={e => dateClickHandler(e)}

You place events into the calendar defining them with this prop:

events={[
    { title: 'event 1', date: '2019-04-01' },
    { title: 'event 2', date: '2019-04-02' }
  ]}

When you need to know which are the dates the calendar is currently showing define the following prop:

datesSet={async (dateInfo) => {
                await getEvents(dateInfo.startStr.split('T')[0], dateInfo.endStr.split('T')[0]);
              }}

Every time you change the view you can request events from the backend like this. (Don't forget to create your own getEvents definition)

Now that you have events placed, you might need to interact with them for showing or modifying purposes. This props is handy when you need to access the event information:

eventClick={e => eventsHandler(e)}

Here you have it, simple react fullcalendar snippet. There are plenty of options in the docs so you can customize your own calendar. CSS, Events, formats, etc... you will find them here: https://fullcalendar.io/docs#toc

Laravel Beyond CRUD IMO

Hiram — Thu, 02 Sep 2021 20:15:47 +0000

This post was originally published on https://blog.eichgi.com/laravel-beyond-crud-imo

Folks, today's opinion is about the Laravel Beyond CRUD course published by Spatie. As Freek said, if you work with Laravel chances are you are using one of their many libraries for the Laravel ecosystem.

Link to the course: laravel-beyond-crud.com

This is a video series & book that provides a mindset when it comes to work with large projects using the Laravel Framework. The entry point is related with Domain Driven Design (DDD) and how could it be applied into the Laravel context. I expected to have some code examples in order to see how the wiring up needs to be modified when connecting the domains modularization and laravel's inner functionality. At the end it's a good overview.

The next episode shows what a Data Transfer Object (DTO) is and its advantages. Having defined a known data structure for data transfer helps to handle communication; a common case is data storage from the request to the controller. Instead of grabbing data manually, you are able to curate it or transform it before its final usage. And testing might get easier given you always know what to provide and expect.

In order to not disclose or diving deeper into the course I will stop here. But the following are some points and it's a part of what you can find in this course:

Keeping model classes small and clean
Structuring complex queries
Passing data around in a structured way using Data Transfer Objects
How to make code reusable by using actions
Improving code clarity by using meaningful names
Keep controllers light by using view models
Adding behaviour to collections
Testing actions, DTOs and model-related classes
Using enhanced test factories to seed data for every scenario

I believe this is a great content whereas you are becoming proficient with Laravel or if you wishes to know the advanced topics. As mentioned previously I'd like to had more content but the course goal is to show off some techniques, patterns and good practices for your projects. Feel free to share your comments 😎

api v2 or something alike

Hiram — Fri, 02 Jul 2021 17:23:56 +0000

Hallo Leute! Today's post is about how I migrated from /api/v1/ to platform v2 🤓

This is the continuation of the Reverse engineering a platform post.

The next scenario for my brand-new compatible platform was to be in charge of the live app consuming the first backend (v1). Given I already understood how it worked, it was time to update the app in order to consume the new API. But unlike the new apps consuming the v2 platform this one was rooted to the initial database/storage process.

In order to be able to do a hot swap when updating, I had to:

migrate the database and make sure the new laravel's
migrations fit as expected
migrate all the files to the new server (I could patch the links but eventually that server was going to be dropped)
add business logic for old and new files and data

It sounds easy but I spent some time figuring out several scenarios in order to pick the simplest solution. Once the roadmap was defined it was basically sew n' sing 😗.

After some polishing it was finally done. I saved some time so the users could make the update, and as usual, you know everything is fine because no one is complaining!

The cherry of the cake was the unlocking of some features I couldn't have it working in v1. This is how the software works essentially, iterate over and over until you have the desired outcome.

Stay tune for more 😎

This post was originally published on https://blog.eichgi.com/apiv2-or-something-alike

Reverse Engineering a platform

Hiram — Thu, 24 Jun 2021 14:30:05 +0000

Hey folks, today's post is about a reverse engineering work I had to do for a platform and what I found by doing it 💪

A while ago I acquired a web platform with an android client for a very entertaining project. The backend was written with Symfony 2.X and the client was a native android app written in Java.

Long short story, the backend was a complete headache. I had to deal with different configurations for the server given it was aimed for PHP 7. A lot of deprecations had happened since then so you can picture it. The first setup was good enough, but I ran out of lucky for the 2nd 🤯, this led me to create my 100% (almost there) compatible backend.

Version 1
I started by consuming all API endpoints to figure out what responses look like. I blue-printed the web admin views to replicate the same functionality, and after a thorough debugging to the database I was able to create the same relations with some tweaks for a better integration. This work took me like two weeks but I ended up with an easier and well-known backend.

The android app didn't require too many changes. I basically changed the interfaces, some texts translations and added some validations. Version 1 was a pretty straight forward work.

Update to version 2:
The mess came with the update, because I changed things and it was necessary to understand what should happen next in order to place it into the app. It costs me two rounds, and a hell of debugging. This is basically how you learn to reverse engineering, things must follow a flow and you need to chunk it into small pieces so they can fit. Discover the rules and validations might be the hardest part, try and failure over and over.

Graphic explanation, thanks bob

Finally I could achieve the expected behavior and things continue working smoothly. It has been a good experience. Now that I have forked the project every new change is easier to me. I could go deeper with advanced android topics as well. This is a practice I completely recommend to everyone in their spare time. Keep coding and keep failing ✌

This post was originally published on https://eichgi.hashnode.dev/reverse-engineering-a-platform

Do you really know AdMob? 🤑

Hiram — Fri, 14 May 2021 16:25:59 +0000

For the last 3 years I´ve been learning AdMob by the hard way 😫... The last strike reduced the earnings by 100% because we didn't complied with its policies. I won't share numbers but it really hit us. That was the moment I decided I needed to take the bull by the horns and learn how to avoid these situations again.

The following list is intended to highlight what you should & shouldn't do with your ads setup and your AdMob account:

Monitor any ads frequency change and do it slowly so your users get use to it
Do not request to your users to consume ads unnecessarily
Unlike other networks like Unity Ads, AdMob doesn't invalidate user's click which means your score will decrease and potentially lead your account to get suspended.
Next logic step is to implement a mechanism in which you recognize and prevent intended abuse from your users (firebase events & remote config might help you with this)
Mediation might help you to get better eCPM by leveraging AdMob to handle different networks
To have a 2nd network implementation in case you got suspended, the hot-swap functionality might let you lose less money until your account is back in the game.
Align the Ads categories with your app's content rating; make sure you don't have bets or adult ads if your app's rating is for kids.

Another way we increased and improved our ads implementation was working along an apps partner manager from AdMob. These managers will help you land better ad types and formats within your apps. They usually make suggestions about frequency, when, where and how to place better ad units. Also how to avoid common mistakes like accidental clicks and poor visibility. We were reached by one so I am not entirely sure how you can receive help and assistance from them but probably it happens once you reach certain amount of traffic.

The last suggestion is the most obvious and important, read the guidelines and take an AdMob course so you can have deeper knowledge of the entire ecosystem. In the following link you will find the Google´s official guide for AdMob: https://skillshop.exceedlms.com/student/path/17105-get-started-with-google-admob

Topics you'll find there are:

Sign and set up of your AdMob account
How to create Ad units and which are the formats and types available
Generate reports
Use mediation for multiple ad networks
Set up block controls for different audiences or filter undesired advertisers

At the moment I am trying to launch in-house campaigns so I can advertise my own app inventory for free. Please feel free to suggest more good practices you know. And if you were wondering, the last implemented strategy allowed us to recover partially while improving our potential to continue growing more over time. Fail once, fail twice, fail better 😉...

Coding Android apps again

Hiram — Wed, 14 Apr 2021 14:10:51 +0000

This post was originally published in my blog: https://blog.eichgi.com/coding-android-apps-again

Hi folks, I wanted to share that for the last 2 months I've been coding again android apps! I haven't work with apps since my first year as developer, like 5 years ago.

I wanted to highlight how much the apps environment has changed as well as my knowledge regarding the Android environment. Last year I was tinkering with the 1st beta of Ionic-vue, leveraging from my js and react-vue skills I was able to create a basic games app which makes me continue doing more apps.

Then I decided to jump into native code again given I already know Java, and the experience was awesome. I was able to write logic and use the components quite easily, I did remember learning networking with OkHttp and Retrofit which wasn't easy. But now it couldn't be more smoothly given everything I've been learning by exposing me to different technologies in these years.

Now with Firebase being THE thing for Android everything became easier, natural and fluid. I still prefer to wire up my connections to my backend, but for analytics and maybe auth along other minor services Firebase is the way.

When JetBrains released the first Kotlin beta I was interested, but in the end I continue as a fullstack. Now it's a thing I want to learn, "fun" for functions? It has to mean something 😁.

I think that's it for now, I will continue developing more features for the apps we published. I hope we can ramp up into 2M MAU for the next post so I can share more insights about how to deal with updates and changes your community may dislike ✌️

Stay sharp

GOlang discussion 🤔

Hiram — Wed, 24 Feb 2021 20:56:30 +0000

Hi folks!

I am doing a Go bootcamp and I would like to know your thoughts about working with Go compared to other languages like Javascript, PHP or (insert your preferred language).

It was easy or hard for you to make the leap to Go? What you think it's great in Go and what stuff do you miss from other languages? What is your recommendation for Go rookies?

Thanks every1 for your opinions!

p.d. which is the best guide or course besides officials docs do you recommend? 👌