Abstract Core ✨

Getting started 🏁

What is this 🤷‍♂️?

Abstract core is a library made for Next.js Abstract allowing it to handle everything regarding http request caching and security issues.

HTTP Utilities 🌐

In here you'll have 3 http clients:

• fetcher
• useFetch
• serverFetch

Each of them is based on axios meaning one can use it like one would use axios. They are made to handle the following

⚠️ Abtract Handler

Just for a heads up; here's how abstract works on requests perspective.

First you need to know that we're using config-yml in that way you can have:

# config/development.yml or production.yml at the root of your project
providers:
  keycloak:
    identifier_key: client_id
    password_key: client_secret
    token_type: Bearer
    token_key: access_token
    authentication_path: /{realm}/auth/token
    authorization_key: Authorization
  strapi:
    identifier_key: identifier
    password_key: password
    token_type: Bearer
    token_key: jwt
    authentication_path: /auth/local
    authorization_key: Authorization
    authentication_via_form: true
  auth0:
    identifier_key: client_id
    password_key: client_secret
    token_type: Bearer
    token_key: access_token
    authorization_key: Authorization
  customCentralAuth0:
    identifier_key: app_id
    password_key: app_secret
    token_type: none
    token_key: access_token
    authorization_key: X-Auth-Token

app:
  gateway:
    provider: auth0
    authentication_path: /auth/v1/token
  centralized_content:
    provider: customCentralAuth0
    authentication_path: /x-user/token

caching_sytem: nodeCache

That's essential so that abstract knows how to operate when targetting your backend apps. Please have in mind that in the app keyword, the key are your backends

Moving to the handler:

• Next.js Page router

import { abstractHandler } from 'osnmarket-abstract-core/handlers';

export default async function handler(req, res) {
  const { data, status } = await abstractHandler(req, res);

  return res.status(status).json(data)
}

• Next.js App router

import { NextResponse } from 'next/server';
import { abstractHandler } from 'osnmarket-abstract-core/handlers';
export const dynamic = 'force-dynamic' // defaults to auto

const handler = async (req, res) => {
  const { data } = await abstractHandler(req, res)

  return NextResponse.json(data)
}

export async function OPTIONS(req, res) {
  return handler(req, res)
}

export async function GET(req, res) {
  return handler(req, res)
}

export async function POST(req, res) {
  return handler(req, res)
}

export async function PUT(req, res) {
  return handler(req, res)
}

export async function PATCH(req, res) {
  return handler(req, res)
}

fetcher

The fetcher is made to handles all runtime client requests. It will send request on abstractHandler and safe communication is made available between them

Basic usage

import { fetcher } from 'osnmarket-abstract-core/client'

fetcher({
  uri: 'https://example.com',
  options: {
    method: 'POST',
    headers: {
      'content-type': 'application/json'
    }
  },
  body: {
    key: 'any',
    value: 'payload'
  },
  target: 'backend', // if not specified it will use the default target
})

This represents a basic implementation of the fetcher. Also if one wanted to use special axios methods, one can do this:

import { fetcher } from 'osnmarket-abstract-core/client'

fetcher({
  uri: 'https://example.com/form/1',
  options: {
    axs_method: 'getForm'
  }
  // The rest ...
})

Addons

You'll find special args you can use in the fetcher

• encrypt It's an array which once specified, will encrypt those keys inside the response before it's returned to the client; even if the specified keys are an array or an object.

fetcher({
  uri: 'https://example.com/user/1',
  encrypt: ['id', 'uuid', 'customer']
})

// Which response should be this

{
  "id": 1,
  "uuid": "12Ddzad-dazdza-deaeza-212ez",
  "customer": {
    "name": "Doe",
    "surname": "John",
    "adress": "Townville"
  },
  "status": "active"
}

// Would be

{
  "id": "aazoezaezaezaea", // Random gibberish
  "uuid": "aazoezaezaezaea", // Random gibberish
  "customer": "zaeazeazeazeazed", // Random gibberish
  "status": "active"
}

When you do that one might ask "Wait 🤔, that's cold 🥶 but how to I consume it on my code!?"

And you're right Meum 🤗, How?

Use secureContentDecryption 🥳

import { fetcher } from 'osnmarket-abstract-core/client'
import { secureContentDecryption } from 'osnmarket-abstract-core/utils'

const { data } = await fetcher({
  uri: 'https://example.com/user/1',
  encrypt: ['id', 'uuid', 'customer']
})

console.log({
  ...data,
  "customer": JSON.parse(secureContentDecryption(data.customer))
})

// JSON.parse Because objects and arrays are stringified

// Would give

{
  "id": "aazoezaezaezaea", // Random gibberish
  "uuid": "aazoezaezaezaea", // Random gibberish
  "status": "active",
  "customer": {
    "name": "Doe",
    "surname": "John",
    "adress": "Townville"
  }
}

• user_token

Usually, fetcher will use the backend's token (automatic authentication) but when for example you have an authenticated user, you can specify the token of the user to override the default token.

import { fetcher } from 'osnmarket-abstract-core/client'
import { secureContentDecryption } from 'osnmarket-abstract-core/utils'

const { data } = await fetcher({
  uri: 'https://example.com/user/1',
  user_token: 'Bearer token'
})

useFetch

Behind this hook is SWR so use it in the same way; knowing it uses as http client the fetcher so what ever is implemented on it is available on it. (Yep Eli it saves me a lot of explanation 🌚)

import { useFetch } from 'osnmarket-abstract-core/hook'

const { data } = await useFetch({
  uri: 'https://example.com/user/1'
})

Addons

• refreshInterval

Sends request periodically

import { useFetch } from 'osnmarket-abstract-core/hook'

const { data } = await useFetch({
  uri: 'https://example.com/user/1',
  refreshInterval: 5000 // each five seconds
})

serverFetch

It's the only utility that won't use the abstractHandler because it's usable only at server level but it works the same way fetcher does (Saves me a lot of explanation too 😅)

import { serverFetch } from 'osnmarket-abstract-core/server'

const { data } = await serverFetch({
  uri: 'https://example.com/user/1'
})

MKWYD (Must Know What You Do) Section

• extractSavedToken

Use this method to extract a token from the saved cache.

import { extractSavedToken } from 'osnmarket-abstract-core/core'
const accessToken = await extractSavedToken('myTarget');

console.log(accessToken); // { Authorization: "Bearer myAwesomeToken" }