DEV Community: Mihai-Adrian Andrei

How to add Stripe to Astro

Mihai-Adrian Andrei — Thu, 17 Oct 2024 11:55:28 +0000

Integrating Stripe with Astro: A Step-by-Step Guide

In this tutorial, I'll show you how to set up Stripe in an Astro project, from creating a new project to handling webhooks and creating checkout sessions.

Step 1: Creating a New Astro Project

To get started, we need to create a new Astro project using the following command:

npm create astro@latest

The version of Astro being used is 4.16.5

Step 2: Installing Stripe

Next, install the Stripe package.

npm i stripe

The version of Stripe being used is 17.2.0

Step 3: Configuring Stripe

Create a file called src/lib/stripe.ts to initialize Stripe and handle its configuration:

import Stripe from 'stripe';

if (!import.meta.env.STRIPE_SECRET_KEY) {
    throw new Error('Missing Stripe secret key');
}

export const stripe = new Stripe(import.meta.env.STRIPE_SECRET_KEY, {
    apiVersion: '2024-09-30.acacia',
});

Nothing fancy here, just the fact that the apiVersion is based on the stripe version ( for 17.2.0 is 2024-09-30.acacia )

After that create a new file in src/lib/get-prices.ts and add the following:

export async function getPrices() {
    const data = [
        {
            id: 1,
            amount: 1000,
            title: 'One time Price 1',
        },
        {
            id: 2,
            amount: 1000,
            title: 'One time Price 2',
        },
        {
            id: 3,
            amount: 1500,
            credits: 10,
            title: '10 credits',
        },
        {
            id: 4,
            amount: 3000,
            credits: 25,
            title: '25 credits',
        },
    ];
    return data;
}

Here, we will configure the prices.

Step 4: Setting Up Stripe CLI for Webhooks

Webhooks allow Stripe to notify your server of events (such as payment completions). To listen to these events on local we need the following:

"stripe:listen": "stripe listen --forward-to http://localhost:4321/api/webhooks/stripe"

You'll also need to install the Stripe CLI, which allows your local server to receive Stripe events. More details on how to install the Stripe CLI can be found at https://docs.stripe.com/stripe-cli.

After that, run:

npm run stripe:listen

It might ask you to login and after that you should see a similar message:

Ready! You are using Stripe API Version. Your webhook signing secret is whsec_something

Step 5: Configuring Environment Variables

In the root of your project, create a .env file with the following content:

STRIPE_SECRET_KEY=your_secret_key_from_stripe
STRIPE_SIGNING_SECRET=signing_key_from_stripe_cli

Step 6: Adding Tailwind CSS and Node.js

For basic styling and to handle the backend requests, add Tailwind CSS and Node.js integrations to your project:

npx astro add tailwind
npx astro add node

Step 7: Creating Stripe Checkout Action

You can read more about actions in Astro at https://docs.astro.build/en/guides/actions/.

We will now create an action to handle the checkout process. Create a file at src/actions/index.ts with the following code:

import { ActionError, defineAction } from "astro:actions";
import { z } from "astro:schema";
import { getPrices } from "../lib/get-prices";
import { stripe } from "../lib/stripe";

export const server = {
  createCheckout: defineAction({
    input: z.object({
      priceId: z.number(),
    }),
    accept: "form",
    handler: async (input) => {
      const prices = await getPrices();
      const price = prices.find((p) => p.id === input.priceId);

      if (!price) {
        throw new ActionError({
          code: "NOT_FOUND",
          message: "Price not found.",
        });
      }

      const baseUrl = 'http://localhost:4321'; // replace with your production URL

      const stripeSession = await stripe.checkout.sessions.create({
        mode: "payment",
        payment_method_types: ["card"],
        line_items: [
          {
            quantity: 1,
            price_data: {
              unit_amount: price.amount,
              currency: "usd",
              product_data: {
                name: price.title,
                description: `Buy ${price.title} product`,
              },
            },
          },
        ],
        metadata: {
          priceId: price.id,
        },
        success_url: `${baseUrl}/?stripe=success`,
        cancel_url: `${baseUrl}/?stripe=cancel`,
      });

      if (!stripeSession.url) {
        throw new ActionError({
          code: "NOT_FOUND",
          message: "Could not create Stripe session",
        });
      }

      return {
        url: stripeSession.url,
      };
    },
  }),
};

Here, we are just taking the priceId from the frontend, look for it inside our prices list. If we find it, we create a stripe checkout session and send the url to the frontend. For the stripe session, we will need to specify a success/cancel url, where the user should be redirected after the payment. Also, we have the possibility to add extra metadata that we will receive into our webhook. Here you usually add the priceId and userId.

Step 8: Rendering the Checkout Form

Now, let's display pricing cards and integrate the checkout button. Add the following code to src/pages/index.astro:

---
import Layout from '../layouts/Layout.astro';
import { getPrices } from '../lib/get-prices';
import { actions } from 'astro:actions';

const prices = await getPrices();

const result = Astro.getActionResult(actions.createCheckout);
if (result && !result.error) {
    return Astro.redirect(result.data.url)
}
---

<Layout title="Welcome to Astro.">
    <h1 class="text-center text-5xl font-bold text-gray-200">Pricing</h1>
    <ul class="mt-12 grid grid-cols-1 gap-10 md:grid-cols-2 lg:grid-cols-3 p-4">
        {
            prices.map((price) => (
                <li class="mx-auto w-full max-w-5xl space-y-4 rounded-lg bg-gray-900 p-8 text-white">
                    <h2 class="text-2xl font-bold">{price.title}</h2>
                    <p class="mt-4 text-3xl font-bold">${price.amount / 100}</p>
                    <form method="POST" action={actions.createCheckout}>
                        <input type="hidden" name="priceId" value={price.id} />
                        <button class="bg-blue-500 text-white hover:bg-blue-600 p-4">
                            Buy
                        </button>
                    </form>
                </li>
            ))
        }
    </ul>
</Layout>

Here, we are fetching the prices on the server, and we create cards for each of the price. Then, for each price, we have a form that calls the previously defined action in order to receive the stripe checkout session. After that, we redirect the user to the stripe page.

Step 9: Creating a Webhook for Stripe

Finally, handle Stripe webhook events. Create the file src/pages/api/webhooks/stripe.ts with the following code:

import type { APIRoute } from 'astro';
import type Stripe from 'stripe';
import { stripe } from '../../../lib/stripe';

type Metadata = {
    priceId: string;
};

export const POST: APIRoute = async ({ request }) => {
    const signature = request.headers.get('stripe-signature');
    if (!signature) {
        return new Response(JSON.stringify({ error: 'Invalid signature' }), {
            status: 400,
            headers: {
                'Content-Type': 'application/json',
            },
        });
    }

    const stripeSigningSecret = import.meta.env.STRIPE_SIGNING_SECRET as string;
    try {
        const event = stripe.webhooks.constructEvent(
            await request.text(),
            signature,
            stripeSigningSecret,
        );

        const completedEvent = event.data.object as Stripe.Checkout.Session & {
            metadata: Metadata;
        };

        if (event.type === 'checkout.session.completed') {
            console.log('Paid', completedEvent.amount_total);
            console.log('Metadata', completedEvent.metadata);

            // Update your database or user status here
        }
        return new Response(JSON.stringify({ success: true, error: null }), {
            status: 200,
            headers: {
                'Content-Type': 'application/json',
            },
        });
    } catch (err) {
        return new Response(
            JSON.stringify({
                success: false,
                error: (err as { message: string }).message,
            }),
            {
                status: 500,
                headers: {
                    'Content-Type': 'application/json',
                },
            },
        );
    }
};

This webhook listens for the checkout.session.completed event from Stripe. Upon receiving the event, you can update your database, apply changes to the user’s account, or trigger any other post-payment action.

Conclusion

That's it! By following these steps, you can successfully integrate Stripe into your Astro project. Pretty easy right?

How to add Supabase Auth to Astro

Mihai-Adrian Andrei — Mon, 14 Oct 2024 09:51:11 +0000

Supabase Authentication in Astro

In this guide, we will integrate Supabase authentication into an Astro project using Supabase's server-side client and Astro middleware.

Prerequisite: Create a GitHub OAuth App and Set it in the Supabase Dashboard

Before integrating GitHub authentication in your Astro app, you need to create a GitHub OAuth app and configure it in the Supabase dashboard.

1. Create a GitHub OAuth App

Follow these steps to create an OAuth app on GitHub:

Go to GitHub Settings:
- Log in to your GitHub account.
- Click on your profile icon in the top-right corner and select Settings.
Navigate to Developer Settings:
- Scroll down on the settings page and click on Developer settings from the sidebar.
Create a New OAuth App:
- Under OAuth Apps, click New OAuth App.
- Fill in the following fields:
  - Application Name: Give your app a name (e.g., "Astro App Auth").
  - Homepage URL: Set this to your app's base URL, e.g., http://localhost:4321 (for local development) or your production URL.
  - Authorization Callback URL: Set this to https://yourProjectId.supabase.co/auth/v1/callback
Register the Application: Once all the fields are filled, click Register Application.
Copy Your Client ID and Secret:
- After registering, you'll be provided with a Client ID.
- Click Generate a new client secret to get your Client Secret.
- Save both these values securely, as you'll need them in Supabase.

2. Configure GitHub OAuth in Supabase

Go to Supabase Dashboard:
- Log in to your Supabase Dashboard.
- Select your project.
Navigate to Authentication Settings:
- In the project dashboard, click on Authentication from the sidebar.
- Go to the Providers tab and find GitHub.
Set GitHub OAuth Details:
- Toggle Enable GitHub.
- Enter the Client ID and Client Secret you copied from GitHub.
- Ensure that the callback URL you set in GitHub matches the one provided in the Supabase project under the GitHub provider settings.
- Save the changes.

3. Set Environment Variables

In your project, ensure that you set the following environment variables with the corresponding values:

SUPABASE_URL=
SUPABASE_PUBLIC_KEY=
SUPABASE_SECRET_KEY=

App code

Now, let's get to the code part. First, we will need to install the dependencies.

0. Install the dependencies

npm i @supabase/ssr @supabase/supabase-js

1. Create a Supabase Server Instance

In server-side environments (e.g., in an Astro middleware), we need to create a Supabase instance that manages user sessions using cookies. Here's how to set up this instance:

// src/lib/supabase.ts

import { createServerClient, parseCookieHeader, type CookieOptionsWithName } from '@supabase/ssr';
import type { AstroCookies } from 'astro';
import type { Database } from 'database.types';

export const cookieOptions: CookieOptionsWithName = {
    path: '/',
    secure: true,
    httpOnly: true,
    sameSite: 'lax',
};

export const createSupabaseServerInstance = (context: {
    headers: Headers;
    cookies: AstroCookies;
}) => {
    const supabase = createServerClient<Database>(
        import.meta.env.SUPABASE_URL!,
        import.meta.env.SUPABASE_PUBLIC_KEY!,
        {
            cookieOptions,
            cookies: {
                getAll() {
                    return parseCookieHeader(context.headers.get('Cookie') ?? '');
                },
                setAll(cookiesToSet) {
                    cookiesToSet.forEach(({ name, value, options }) =>
                        context.cookies.set(name, value, options),
                    );
                },
            },
        },
    );

    return supabase;
};

Supabase Server Client: createServerClient is used to create a Supabase client that is aware of the cookies used for authentication. This client will manage the authentication state server-side.
Cookie Management: The cookieOptions object ensures that the cookies are secure, HTTP-only, and follow the SameSite policy to protect against CSRF attacks. The getAll and setAll methods help Supabase interact with cookies.
Context: The context contains request headers and cookies, which are essential for reading and writing the user's session information during authentication.

2. Create a Supabase Admin Instance

This instance is used for server-to-server communication. Unlike the server-side instance that interacts with user sessions, the admin instance uses the SUPABASE_SECRET_KEY and doesn't manage user sessions but it is used to query the database ignoring the row level security.

// src/lib/supabaseAdmin.ts

import { createClient } from "@supabase/supabase-js";
import { type Database } from "database.types";

export const dbClient = createClient<Database>(
  import.meta.env.SUPABASE_URL,
  import.meta.env.SUPABASE_SECRET_KEY,
  {
    auth: {
      autoRefreshToken: false,
      persistSession: false,
      detectSessionInUrl: false,
    },
  }
);

Admin Client: The admin client (createClient) is used to access Supabase services without relying on user authentication. This is useful for performing actions like querying data or interacting with other Supabase services from the server side.
Auth Options: We've disabled session persistence and auto token refresh because this client is meant for server-side use only, where user sessions are not relevant.

3. Add Middleware for Authentication

Middleware allows us to check the user's session on each request and store user information in locals to make it accessible throughout the app.

import { createSupabaseServerInstance } from "@lib/supabase";
import { dbClient } from "@lib/supabaseAdmin";
import { defineMiddleware } from "astro:middleware";

const PATHS_TO_IGNORE = ["/ignore"];

export const onRequest = defineMiddleware(
  async ({ locals, cookies, url, request, redirect }, next) => {
    if (PATHS_TO_IGNORE.includes(url.pathname)) {
      return next();
    }
    const supabase = createSupabaseServerInstance({
      cookies,
      headers: request.headers,
    });

    const { data } = await supabase.auth.getUser();

    // here you can use the dbClient to query supabase if you want aditional fields / logic. For ex, query a profile table

    if (data.user) {
      locals.user = {
        email: data.user.email,
        id: data.user.id,
      };
    }
    return next();
  }
);

Define Middleware: We define middleware that runs on every request unless the URL is in the PATHS_TO_IGNORE list. This is useful for paths where authentication is not required.
Supabase Session: We use the server-side Supabase instance to get the current user session (supabase.auth.getUser()).
Setting Locals: If a user session is found, we store the user's email and ID in locals for later use (e.g., rendering user-specific content on pages).

4. Add callback for auth in `pages/api/auth/callback.ts`.

You will need to specify this inside supabase for callback url.

import { createSupabaseServerInstance } from '@lib/supabase';
import type { APIRoute } from 'astro';

export const GET: APIRoute = async ({ cookies, request, url, redirect }) => {
    const authCode = url.searchParams.get('code');
    if (!authCode) {
        return new Response('No code provided', { status: 400 });
    }

    const supabase = createSupabaseServerInstance({ cookies, headers: request.headers });
    const { error } = await supabase.auth.exchangeCodeForSession(authCode);

    if (error) {
        return new Response(error.message, { status: 500 });
    }
    return redirect('/');
};

5. Create actions

Define the actions for logging in and logging out, using Supabase's OAuth and session management. You can read more about actions here.

// src/actions.ts

import { createSupabaseServerInstance } from "@lib/supabase";
import type { Provider } from "@supabase/supabase-js";
import { ActionError, defineAction } from "astro:actions";
import { z } from "astro:schema";
import { createSupabaseServerInstance } from "@lib/supabase";

export function getBaseUrl(): string {
  return (
    process.env.PUBLIC_URL ||
    `http://localhost:${process.env.PORT ?? 4321}`
  );
}

export const server = {
    login: defineAction({
    accept: "form",
    input: z.object({
      provider: z.string(),
    }),
    handler: async (input, context) => {
      const baseUrl = getBaseUrl();
      const supabase = createSupabaseServerInstance({
        headers: context.request.headers,
        cookies: context.cookies,
      });
      const { data, error } = await supabase.auth.signInWithOAuth({
        provider: input.provider as Provider,
        options: {
          redirectTo: `${baseUrl}/api/auth/callback`,
        },
      });
      if (error) {
        throw new ActionError({
          code: "BAD_REQUEST",
          message: "Failed to sign in",
        });
      }
      return {
        url: data.url,
      };
    },
  }),
  logout: defineAction({
    accept: "form",
    handler: async (_, context) => {
      const supabase = createSupabaseServerInstance({
        headers: context.request.headers,
        cookies: context.cookies,
      });
      const { error } = await supabase.auth.signOut();
      if (error) {
        throw new ActionError({
          code: "BAD_REQUEST",
          message: "Failed to sign in",
        });
      }
      return {
        ok: true,
      };
    },
  }),
}

6. Create a Login Page

---
// pages/login.astro

import Layout from "@layouts/Layout.astro";
import { actions } from 'astro:actions';

const result = Astro.getActionResult(actions.login);
if (result && !result.error) {
  return Astro.redirect(result.data.url);
}
---

<Layout title="Welcome to Astro.">
    <div
        class="mx-auto flex items-center justify-center rounded-xl bg-gray-900 px-4 py-8 text-white shadow-sm"
    >
        <div class="mx-auto max-w-md space-y-6">
            <div class="space-y-2 text-center">
                <h1 class="text-3xl font-bold">Sign In</h1>
                <p class="text-gray-500 dark:text-gray-400">
                    Sign in to your account using one of the options below.
                </p>
            </div>
            <form class="space-y-4" action={actions.login} method="POST">
                <button
                    class="flex w-full items-center justify-center gap-2 rounded-md p-2 hover:bg-gray-700 hover:text-white"
                    value="github"
                    name="provider"
                >
                    Sign in with GitHub
                </button>
            </form>
        </div>
    </div>
</Layout>

Login Form: The form triggers the login action (defined next) via a POST request. It includes a button for GitHub OAuth login.
OAuth Flow: When the user submits the form, Astro will handle the OAuth flow and, upon success, redirect the user to the appropriate URL.

7. Protect Pages with Authentication

In protected pages, check if a user is authenticated by using Astro.locals. If no user is found, redirect them to the login page.
In astro files:

---
// pages/protected.astro

const { user } = Astro.locals;
if(!user){
  return Astro.redirect('/login')
}
---
<h1>Protected page</h1>

In actions:

testAction: defineAction({
    input: z.object({
      data: z.string(),
    }),
    handler: async (input, context) => {
      if (!context.locals.user) {
        throw new ActionError({
          code: "UNAUTHORIZED",
          message: "Unauthorized",
        });
      }
      // now user is logged in
      return {
        input
      };
    },
  }),

Conclusion

That's it! By following these steps, you can successfully integrate Supabase authentication into your Astro project using GitHub OAuth. Pretty easy right?

Next, I'll show you how to add Stripe to your Astro app. Stay tuned! 👋

Remix + Express + TS

Mihai-Adrian Andrei — Mon, 09 Sep 2024 14:52:58 +0000

How to Add TypeScript to a Remix + Express Project

Hello! In this article, I'll guide you through the steps to add TypeScript to a Remix + Express boilerplate project. By the end of this tutorial, you'll have a fully functional Remix app running with Express and Typescript. You can find the final code here.

Step 1: Clone the Official Express Starter

First, let's start by cloning the official Remix Express starter template:

npx create-remix@latest --template remix-run/remix/templates/express

Step 2: Add Required Dependencies

Next, install the additional dependencies needed for TypeScript support:

npm install -D esbuild tsx

Step 3: Create a TypeScript Server File

Remove the existing server.js file, and create a new file named server/index.ts.

Then, copy and paste the following code into server/index.ts:

// server/index.ts
import { createRequestHandler } from "@remix-run/express";
import { type ServerBuild } from "@remix-run/node";
import compression from "compression";
import express from "express";
import morgan from "morgan";

const viteDevServer =
  process.env.NODE_ENV === "production"
    ? undefined
    : await import("vite").then((vite) =>
        vite.createServer({
          server: { middlewareMode: true },
        })
      );

const app = express();

app.use(compression());

// http://expressjs.com/en/advanced/best-practice-security.html#at-a-minimum-disable-x-powered-by-header
app.disable("x-powered-by");

// handle asset requests
if (viteDevServer) {
  app.use(viteDevServer.middlewares);
} else {
  // Vite fingerprints its assets so we can cache forever.
  app.use(
    "/assets",
    express.static("build/client/assets", { immutable: true, maxAge: "1y" })
  );
}

// Everything else (like favicon.ico) is cached for an hour. You may want to be
// more aggressive with this caching.
app.use(express.static("build/client", { maxAge: "1h" }));

app.use(morgan("tiny"));

async function getBuild() {
  try {
    const build = viteDevServer
      ? await viteDevServer.ssrLoadModule("virtual:remix/server-build")
      : // @ts-expect-error - the file might not exist yet but it will
        // eslint-disable-next-line import/no-unresolved
        await import("../build/server/remix.js");

    return { build: build as unknown as ServerBuild, error: null };
  } catch (error) {
    // Catch error and return null to make express happy and avoid an unrecoverable crash
    console.error("Error creating build:", error);
    return { error: error, build: null as unknown as ServerBuild };
  }
}
// handle SSR requests
app.all(
  "*",
  createRequestHandler({
    build: async () => {
      const { error, build } = await getBuild();
      if (error) {
        throw error;
      }
      return build;
    },
  })
);

const port = process.env.PORT || 3000;
app.listen(port, () =>
  console.log(`Express server listening at http://localhost:${port}`)
);

Step 4: Update Vite Configuration

To build the Express server after Remix completes its build, update your vite.config.ts file with the following content:

import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
import esbuild from "esbuild";

export default defineConfig({
  plugins: [
    remix({
      future: {
        v3_fetcherPersist: true,
        v3_relativeSplatPath: true,
        v3_throwAbortReason: true,
      },
      serverBuildFile: 'remix.js',
      buildEnd: async () => {
        await esbuild.build({
          alias: { "~": "./app" },
          outfile: "build/server/index.js",
          entryPoints: ["server/index.ts"],
          external: ['./build/server/*'],
          platform: 'node',
          format: 'esm',
          packages: 'external',
          bundle: true,
          logLevel: 'info',
        }).catch((error: unknown) => {
          console.error('Error building server:', error);
          process.exit(1);
        });
      }
    }),
    tsconfigPaths(),
  ],
});

Step 5: Update NPM Scripts

Now, update the start and dev scripts in your package.json:

"scripts": {
  "build": "remix vite:build",
  "dev": "tsx server/index.ts",
  "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
  "start": "cross-env NODE_ENV=production node ./build/server/index.js",
  "typecheck": "tsc"
}

Conclusion

That's it! Now you can continue writing your Remix code as usual. But you might be wondering: why would you need this setup? By using Express, every request goes through the Express server, allowing you to use Express middlewares to pass data to Remix, such as user context while implementing authentication.

In a future article, I'll show you how to add Lucia-Auth to this template 👀.

Stay tuned! 👋

Remix + Express + TS

Mihai-Adrian Andrei — Mon, 09 Sep 2024 14:52:53 +0000

How to Add TypeScript to a Remix + Express Project

Step 1: Clone the Official Express Starter

First, let's start by cloning the official Remix Express starter template:

npx create-remix@latest --template remix-run/remix/templates/express

Step 2: Add Required Dependencies

Next, install the additional dependencies needed for TypeScript support:

npm install -D esbuild tsx

Step 3: Create a TypeScript Server File

Remove the existing server.js file, and create a new file named server/index.ts.

Then, copy and paste the following code into server/index.ts:

// server/index.ts
import { createRequestHandler } from "@remix-run/express";
import { type ServerBuild } from "@remix-run/node";
import compression from "compression";
import express from "express";
import morgan from "morgan";

const viteDevServer =
  process.env.NODE_ENV === "production"
    ? undefined
    : await import("vite").then((vite) =>
        vite.createServer({
          server: { middlewareMode: true },
        })
      );

const app = express();

app.use(compression());

// http://expressjs.com/en/advanced/best-practice-security.html#at-a-minimum-disable-x-powered-by-header
app.disable("x-powered-by");

// handle asset requests
if (viteDevServer) {
  app.use(viteDevServer.middlewares);
} else {
  // Vite fingerprints its assets so we can cache forever.
  app.use(
    "/assets",
    express.static("build/client/assets", { immutable: true, maxAge: "1y" })
  );
}

// Everything else (like favicon.ico) is cached for an hour. You may want to be
// more aggressive with this caching.
app.use(express.static("build/client", { maxAge: "1h" }));

app.use(morgan("tiny"));

async function getBuild() {
  try {
    const build = viteDevServer
      ? await viteDevServer.ssrLoadModule("virtual:remix/server-build")
      : // @ts-expect-error - the file might not exist yet but it will
        // eslint-disable-next-line import/no-unresolved
        await import("../build/server/remix.js");

    return { build: build as unknown as ServerBuild, error: null };
  } catch (error) {
    // Catch error and return null to make express happy and avoid an unrecoverable crash
    console.error("Error creating build:", error);
    return { error: error, build: null as unknown as ServerBuild };
  }
}
// handle SSR requests
app.all(
  "*",
  createRequestHandler({
    build: async () => {
      const { error, build } = await getBuild();
      if (error) {
        throw error;
      }
      return build;
    },
  })
);

const port = process.env.PORT || 3000;
app.listen(port, () =>
  console.log(`Express server listening at http://localhost:${port}`)
);

Step 4: Update Vite Configuration

To build the Express server after Remix completes its build, update your vite.config.ts file with the following content:

import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
import esbuild from "esbuild";

export default defineConfig({
  plugins: [
    remix({
      future: {
        v3_fetcherPersist: true,
        v3_relativeSplatPath: true,
        v3_throwAbortReason: true,
      },
      serverBuildFile: 'remix.js',
      buildEnd: async () => {
        await esbuild.build({
          alias: { "~": "./app" },
          outfile: "build/server/index.js",
          entryPoints: ["server/index.ts"],
          external: ['./build/server/*'],
          platform: 'node',
          format: 'esm',
          packages: 'external',
          bundle: true,
          logLevel: 'info',
        }).catch((error: unknown) => {
          console.error('Error building server:', error);
          process.exit(1);
        });
      }
    }),
    tsconfigPaths(),
  ],
});

Step 5: Update NPM Scripts

Now, update the start and dev scripts in your package.json:

"scripts": {
  "build": "remix vite:build",
  "dev": "tsx server/index.ts",
  "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
  "start": "cross-env NODE_ENV=production node ./build/server/index.js",
  "typecheck": "tsc"
}

Conclusion

In a future article, I'll show you how to add Lucia-Auth to this template 👀.

Stay tuned! 👋

Implementing Supabase Auth in Next13 with Prisma

Mihai-Adrian Andrei — Mon, 23 Oct 2023 18:04:59 +0000

Introduction

Authentication is a critical aspect of many web applications, and it can sometimes be a complex task. In this article, I will walk you through the process of implementing Supabase Auth in a NextJS 13 application while using Prisma for database interaction. I'll provide step-by-step instructions and explanations to help you understand the entire process.

If you want to skip the tutorial and jump right in the action, you can find the code here.

The Challenge of Using Supabase Auth with Prisma

Supabase Auth is a powerful package that simplifies authentication in your web applications. However, it manages the user table in a database schema called auth, while Prisma typically uses the public schema. This difference makes it challenging to establish foreign key relations between your tables and the auth.users table. To address this issue, you might consider using Prisma's preview feature called multiSchema. But this approach has its drawbacks, such as pulling unnecessary tables and potential structural changes by Supabase in the future.

The Solution: Creating a Custom `profile` Table with Database Triggers

To overcome these challenges, we will be creating a custom profile table and we will use database triggers. This approach allows us to manage user data efficiently while maintaining a flexible and scalable architecture.

Here is a diagram of the implementation:

Adding user auth to the application using supabase is pretty easy. We just use the supabase-js library, and we call a method to sign-in or sign-up. After that, supabase will handle everything:

inserting the user in db;
generating jwt tokens;
merging the user if you use multiple auth providers with the same email etc.

In order to use the user in prisma, we will create a database trigger that will listen for inserts into auth.users and create an entry in our profile table. In reverse, when we want to delete a user, we will have a trigger on profile to delete the corresponding record from auth.users.

Setting Up Your Next.js Project

Before we dive into the technical details, let's start by creating a new Next.js project. At the time of writing this article, Next.js had version 13.5.5. Begin by setting up your project using the following command:



npx create-next-app

Gathering Supabase Environment Variables

For a successful integration with Supabase, you need to create a Supabase project and collect three essential environment variables. These variables will enable your Next.js application to communicate with Supabase.

NEXT_PUBLIC_SUPABASE_URL: Your Supabase project's URL.
NEXT_PUBLIC_SUPABASE_ANON_KEY: Your Supabase project's anonymous key.
DATABASE_URL: Your database connection URL.

From SETTINGS -> API: NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY.

From SETTINGS -> DATABASE -> Connection string -> nodejs: DATABASE_URL.

Also, from the settings, disable email confirmation in order to make our login process easier for the purpose of this tutorial:

Don't worry, the same login flow will work for Github, Google or any other provider you choose.

Installing Prisma and Configuring the Database

To use Prisma in your project, you need to install it and configure the database connection. Here's the step-by-step process:

Install Prisma and Prisma Client.



   npm install -D prisma
   npm install @prisma/client
   npx prisma init

Define your Prisma schema in the schema.prisma file.



   generator client {
     provider = "prisma-client-js"
   }

   datasource db {
     provider = "postgresql"
     url = env("DATABASE_URL")
   }

   enum Role {
     admin
     user
   }

   model Profile {
     id    String @id @db.Uuid
     role  Role   @default(user)
     notes Note[]

     @@map("profile")
   }

   model Note {
     id   String @id @default(uuid()) @db.Uuid
     text String

     user   Profile @relation(fields: [userId], references: [id], onDelete: Cascade, onUpdate: Cascade)
     userId String  @db.Uuid

     @@map("note")
   }

Then, as discussed in the diagram above, we need some DB triggers. Since we don't want to give prisma access to the auth schema, because we will need to pull all the tables ( and supabase has a lot of them), we will use another library to add our trigers.

Create a file for adding database triggers using Node.js.



   npm install dotenv postgres tsx



   // File: /lib/seedTriggers.ts

   import postgres from "postgres";
   import "dotenv/config";

   const dbUrl = process.env.DATABASE_URL;

   if (!dbUrl) {
     throw new Error("Couldn't find db url");
   }
   const sql = postgres(dbUrl);

   async function main() {
     await sql`
        create or replace function public.handle_new_user()
        returns trigger as $$
        begin
            insert into public.profile (id)
            values (new.id);
            return new;
        end;
        $$ language plpgsql security definer;
        `;
     await sql`
        create or replace trigger on_auth_user_created
            after insert on auth.users
            for each row execute procedure public.handle_new_user();
      `;

     await sql`
        create or replace function public.handle_user_delete()
        returns trigger as $$
        begin
          delete from auth.users where id = old.id;
          return old;
        end;
        $$ language plpgsql security definer;
      `;

     await sql`
        create or replace trigger on_profile_user_deleted
          after delete on public.profile
          for each row execute procedure public.handle_user_delete()
      `;

     console.log(
       "Finished adding triggers and functions for profile handling."
     );
     process.exit();
   }

   main();

Update your package.json to include a script for running migrations and adding triggers.



   "scripts": {
       "dev": "next dev",
       "build": "next build",
       "start": "next start",
       "lint": "next lint",
       "migrate-dev": "npx prisma migrate dev && npx tsx lib/seedTriggers.ts"
   }

Run the migration using npm run migrate-dev and provide a name (e.g., "init") to create the tables in Supabase and add your triggers. After that, we can check supabase to see if the tables were created.

Another thing that you will need to do is for each table that is created, manually enable RLS:

Setting Up Prisma Connection

Create a file called lib/db.ts and include the following code to set up your Prisma connection.



import { PrismaClient } from "@prisma/client";

declare global {
  var prisma: PrismaClient | undefined;
}

export const prisma =
  global.prisma ||
  new PrismaClient({
    log: process.env.NODE_ENV === "development" ? ["error", "warn"] : ["error"],
  });

if (process.env.NODE_ENV !== "production") {
  global.prisma = prisma;
}

We will use this later on an admin page to get the profile of the user in order to see if he has the right role. Next, let's setup supabase login.

Setting Up Supabase Login and Registration

We will now configure Supabase authentication in our Next.js application. This part is inspired by the official Supabase documentation, which you can find here. You can also watch a video tutorial by Jon Meyers at the following link.

Install Dependencies



npm install @supabase/auth-helpers-nextjs @supabase/supabase-js

Create a Middleware for Supabase

Create a middleware.ts file in the root of your project to configure Supabase middleware.



// File: middleware.ts

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

export async function middleware(req) {
  const res = NextResponse.next();

  // Create a Supabase client configured to use cookies
  const supabase = createMiddlewareClient({ req, res });

  // Refresh session if expired - required for Server Components
  await supabase.auth.getSession();

  return res;
}

Implement Code Exchange Route

In your app/auth/callback/route.ts, set up the code exchange route.



// File: app/auth/callback/route.ts

import { createRouteHandlerClient } from "@supabase/auth-helpers-nextjs";
import { cookies } from "next/headers";
import { NextResponse } from "next/server";

export const dynamic = "force-dynamic";

export async function GET(request) {
  const requestUrl = new URL(request.url);
  const code = requestUrl.searchParams.get("code");

  if (code) {
    const supabase = createRouteHandlerClient({ cookies });
    await supabase.auth.exchangeCodeForSession(code);
  }

  return NextResponse.redirect(requestUrl.origin);
}

Create Supabase Client Components

Now, let's create client components to interact with Supabase for authentication. You could also create server components instead, as explained in the supabase docs.

Create `app/_components/Login.tsx`



// File: app/_components/Login.tsx

"use client";

import { createClientComponentClient } from "@supabase/auth-helpers-nextjs";
import { useRouter } from "next/navigation";
import { useState } from "react";

export default function Login() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [errorMessage, setErrorMessage] = useState("");
  const router = useRouter();
  const supabase = createClientComponentClient();

  const handleSignUp = async () => {
    const { error } = await supabase.auth.signUp({
      email,
      password,
      options: {
        emailRedirectTo: `${location.origin}/auth/callback`,
      },
    });
    if (error) {
      setErrorMessage(error.message);
    } else {
      router.refresh();
    }
  };

  const handleSignIn = async () => {
    const { error } = await supabase.auth.signInWithPassword({
      email,
      password,
    });
    if (error) {
      setErrorMessage(error.message);
    } else {
      router.refresh();
    }
  };

  return (
    <>
      {errorMessage && <p className="bg-red-700 p-4">{errorMessage}</p>}
      <form className="flex flex-col gap-4">
        <label className="grid">
          Email
          <input
            className="p-2 text-black"
            name="email"
            onChange={(e) => setEmail(e.target.value)}
            value={email}
          />
        </label>
        <label className="grid">
          Password
          <input
            className="p-2 text-black"
            type="password"
            name="password"
            onChange={(e) => setPassword(e.target.value)}
            value={password}
          />
        </label>
        <button
          className="bg-gray-800 p-2"
          type="button"
          onClick={handleSignUp}
        >
          Sign up
        </button>
        <button
          className="bg-gray-800 p-2"
          type="button"
          onClick={handleSignIn}
        >
          Sign in
        </button>
      </form>
    </>
  );
}

Create `app/_components/Logout.tsx`



// File: app/_components/Logout.tsx

"use client";

import { createClientComponentClient } from "@supabase/auth-helpers-nextjs";
import { useRouter } from "next/navigation";

export default function Logout() {
  const router = useRouter();
  const supabase = createClientComponentClient();

  const handleSignOut = async () => {
    await supabase.auth.signOut();
    router.refresh();
  };

  return (
    <>
      <button onClick={handleSignOut}>Sign out</button>
    </>
  );
}

Creating the main application pages

Now, let's set up the pages of our application, starting with the home page.

Create `app/page.tsx`



// File: app/page.tsx
import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
import { cookies } from "next/headers";
import { redirect } from "next/navigation";
import { prisma } from "@/lib/db";

export default async function Home() {
  const supabase = createServerComponentClient({ cookies });
  const { data } = await supabase.auth.getSession();
  if (!data.session?.user) {
    redirect("/login");
  }

  const notes = await prisma.note.findMany({
    where: { userId: data.session.user.id },
  });
  return (
    <main>
      <h1 className="text-2xl text-center mb-8">Protected page</h1>
      <pre>{JSON.stringify({ session: data.session, notes }, null, 4)}</pre>
    </main>
  );
}

After you add this code, the / route cannot be accessed anymore. If you try going to it, you will be redirected to /login. But we don't have that page yet, so you will see a 404 error.

Create `app/login/page.tsx`



// File: app/login/page.tsx
import Login from "@/app/_components/Login";
import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
import { cookies } from "next/headers";
import { redirect } from "next/navigation";

export default async function LoginPage() {
  const supabase = createServerComponentClient({ cookies });
  const { data } = await supabase.auth.getSession();
  if (data.session?.user) {
    redirect("/");
  }

  return (
    <main className="max-w-lg m-auto">
      <h1 className="text-2xl text-center mb-6">Login</h1>
      <Login />
    </main>
  );
}

Now, if you go to the login page, and sign-up, you will be redirected to / and you will be able to see your session.

The last thing we are going to implement is an admin route. This one is pretty similar with the root page, with just an extra check.

Create `app/admin/page.tsx`



// File: app/admin/page.tsx
import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
import { cookies } from "next/headers";
import { redirect } from "next/navigation";
import { prisma } from "@/lib/db";

export default async function Home() {
  const supabase = createServerComponentClient({ cookies });
  const { data } = await supabase.auth.getSession();
  if (!data.session?.user) {
    redirect("/login");
  }

  const profile = await prisma.profile.findUnique({
    where: { id: data.session.user.id },
  });

  if (profile?.role !== "admin") {
    redirect("/");
  }

  return (
    <main>
      <h1 className="text-2xl text-center mb-8">Admin page</h1>
      <pre>{JSON.stringify({ profile }, null, 4)}</pre>
    </main>
  );
}

All we need to do is just get the profile based on the supabase user id, and check the role. Pretty easy right? :D
In order to go to this page, in supabase dashboard, change your role to admin.

Conclusion

In this guide, we learned the process of implementing Supabase Auth in a Next13 application while using Prisma for database interaction. We've covered the challenges of combining these technologies and provided solutions to create a flexible and efficient authentication system. With Supabase and Prisma, you can build robust web applications with ease.

And that's it. 🎉🎉🎉
If you have any questions, feel free to reach up in the comments section.

Code available on GitHub.

Building a FastAPI Application and Deploying it with Vercel

Mihai-Adrian Andrei — Fri, 23 Jun 2023 09:23:59 +0000

Are you looking to build a powerful API using FastAPI and deploy it quickly? Look no further! In this tutorial, we'll walk through the steps of creating a FastAPI application and deploying it using Vercel.

Setting up the Environment

To get started, make sure you have Python installed on your machine. We'll be using a virtual environment to keep our project dependencies isolated. Open your terminal and run the following command to create a virtual environment named env:



python -m venv env

Next, activate the virtual environment by running the following command:



source env/bin/activate

Installing FastAPI and Uvicorn

Now that our virtual environment is activated, let's install the necessary dependencies. Run the following command to install FastAPI and Uvicorn:



pip install fastapi uvicorn

FastAPI is the web framework we'll be using to build our API, while Uvicorn is an ASGI server that will serve our FastAPI application.

Creating the FastAPI Application

In your project directory, create a file called main.py and add the following code:



import uvicorn
from fastapi import FastAPI

app = FastAPI()

@app.get("/")
async def root():
    return {"message": "Hello from FastAPI!"}

if __name__ == "__main__":
    uvicorn.run("main:app", host="0.0.0.0", port=8000, reload=True)

This code sets up a basic FastAPI application with a single endpoint at the root URL ("/") that returns a JSON response with a "message" key.

Running the FastAPI Application Locally

To run the FastAPI application locally, open your terminal and navigate to the project directory. Run the following command:



python main.py

This will start the Uvicorn server, and you should see output indicating that the server is running.

Now, open your web browser and visit http://localhost:8000/. You should see the following JSON response:



{
    "message": "Hello from FastAPI!"
}

Congratulations! You have successfully built and run a FastAPI application locally.

Deploying the FastAPI Application with Vercel

To deploy our FastAPI application using Vercel, we need to create a vercel.json configuration file. Create a new file named vercel.json in your project directory and add the following content:



{
  "version": 2,
  "builds": [
    { "src": "main.py", "use": "@vercel/python" }
  ],
  "routes": [
    { "src": "/(.*)", "dest": "/main.py" }
  ],
  "env": {
    "APP_MODULE": "main:app"
  }
}

In this configuration file, we specify that the source file for our deployment is main.py, and we use the @vercel/python builder. We also define a route that redirects all requests to main.py, and we set the APP_MODULE environment variable to main:app, which tells Vercel where to find the FastAPI application instance.

Next, we need to create a requirements.txt file that lists the project dependencies. Run the following command in your terminal to generate the requirements.txt file:



pip freeze > requirements.txt

This command will capture all the installed dependencies and their versions in the requirements.txt file.

Setting up Git and Pushing the Code

Before deploying to Vercel, let's set up a Git repository and push our code to it. First, create a repository on GitHub or any other Git hosting platform. Once you have created the repository, navigate to your project directory in the terminal and run the following commands:



git init
git add .
git commit -m "Deploy FastAPI to Vercel"
git branch -M main
git remote add origin https://github.com/your-username/your-repo.git
git push -u origin main

Make sure to replace your-username and your-repo with your actual GitHub username and repository name.

Deploying with Vercel

Now it's time to deploy our FastAPI application using Vercel. Open the Vercel website (https://vercel.com) and create a new project. Select your Git repository and configure the project settings as seen in the images.

After configuring the project, Vercel will automatically build and deploy your FastAPI application. Once the deployment is complete, you will receive a URL where your API is live!

Congratulations! You have successfully deployed your FastAPI application using Vercel. You can find the deployed code on GitHub and access the live API here.

I hope this tutorial has been helpful in guiding you through the process of building a FastAPI application and deploying it with Vercel. Now you can take advantage of the power and speed of FastAPI, combined with the ease of deployment provided by Vercel, to create and deploy robust APIs in no time. Happy coding!

JWT Authentication using Axios interceptors

Mihai-Adrian Andrei — Wed, 09 Nov 2022 11:32:34 +0000

Hello 👋! In this blog, I will show you to create an axios client using interceptors to use with an app that requires JWT authentication. In this case, we will use React, but in can easily be ported to another framework.

We will use the backend from this blog post.

For this, I've created a starter repository for us to focus only on the refresh token part. You can clone it with this command:

npx degit mihaiandrei97/blog-refresh-token-interceptor react-auth

Inside it, you will see two folders:

react-auth-start: here is the code that you will be using for this project.
react-auth-finished: here is the final code, if you missed something and you need to check it.

Or if you want to see the final code, you can check it here.

Project explanation

The application has 2 pages:

A Login page, with a form where the user can register/login and after that we save the tokens in localStorage.
A Home page where we display the user profile if he is logged in.

I like to keep all of my api calls inside a file/folder called services. With this approach, I can see all the calls used in the app.

Step 1 - Create Axios Interceptor for request

As a first step, let's define the axios interceptors. You can read more about them here, but as a simple explanation, we will use them to execute some code before we make a request, or after we receive a response.

This is what we will implement:

Let's create a file inside lib called app/lib/axiosClient.js:

Here, we will define a function that will create our axios instance. We will use that instance everywhere in the app, instead of axios. If we do that, for each request/response, our interceptors will be executed.

import axios from "axios";

class AxiosInterceptor {
  constructor(instanceConfig = {}) {
    // Initialize Axios instance with provided configuration
    this.axiosInstance = axios.create({
      ...instanceConfig,
    });

    // Add request interceptor
    this.axiosInstance.interceptors.request.use(
      (config) => {
        const accessToken = this.getAccessToken();
        if (accessToken) {
          config.headers.Authorization = `Bearer ${accessToken}`;
        }
        return config;
      },
      (error) => Promise.reject(error),
    );

    // Bind instance methods for convenience
    this.get = this.axiosInstance.get.bind(this.axiosInstance);
    this.post = this.axiosInstance.post.bind(this.axiosInstance);
    this.put = this.axiosInstance.put.bind(this.axiosInstance);
    this.delete = this.axiosInstance.delete.bind(this.axiosInstance);
  }

  getAccessToken() {
    return localStorage.getItem("accessToken");
  }
}

// Export a pre-configured instance of AxiosInterceptor
export const client = new AxiosInterceptor({
  baseURL: "http://localhost:5000/api/v1",
});

In this file, we define the class AxiosInterceptor and we create an instance of axios with the provided configuration. We also add a request interceptor that will add the Authorization header with the accessToken from localStorage.

Step 2 - Create the services

Now, let's create the app/lib/services.js file, where we would store all of our api calls.

import { client } from "./axiosClient";

export function register({ email, password }) {
  return client.post("auth/register", { email, password });
}

export function login({ email, password }) {
  return client.post("auth/login", { email, password });
}

export function getProfile() {
  return client.get("/users/profile");
}

Here, we imported the client instance, and we use it to make requests like we would normally do with the axios keyword.

And now we can use these functions in our components. Let's go to the Login component and add the login/register functionality. Let's add the clientAction that is going to be called when the form is submitted.

export async function clientAction({ request }) {
  try {
    const formData = await request.formData();
    const type = formData.get("type");
    const email = formData.get("email");
    const password = formData.get("password");

    const response =
      type === "register"
        ? await register({ email, password })
        : await login({ email, password });
    const { accessToken, refreshToken } = response.data;
    localStorage.setItem("accessToken", accessToken);
    localStorage.setItem("refreshToken", refreshToken);
    return redirect("/");
  } catch (error) {
    return {
      error: error?.response?.data?.message || error.message,
    };
  }
}

In this function, we get the form data and we call the register or login function from the services.js file. After that, we save the tokens in localStorage and redirect the user to the home page.
Next, let's go to the Home page.

There, let's add the getProfile function that will be called when the component mounts.

export async function clientLoader() {
  try {
    const accessToken = localStorage.getItem("accessToken");
    if (!accessToken) {
      return redirect("/login");
    }

    const { data } = await getProfile();

    return { profile: data };
  } catch {
    localStorage.removeItem("accessToken");
    return redirect("/login");
  }
}

In this function, we check if the user is logged in. If not, we redirect him to the login page. If he is logged in, we call the getProfile function and we return the user profile.

We can also add a Logout button and display the profile.

export async function clientAction() {
  localStorage.removeItem("accessToken");
  localStorage.removeItem("refreshToken");
  return null;
}

export default function Home(props) {
  return (
    <div className="min-h-screen bg-gray-100 py-12 px-4 sm:px-6 lg:px-8">
      <div className="max-w-3xl mx-auto bg-white shadow-md rounded-lg overflow-hidden">
        <div className="px-6 py-8">
          <h1 className="text-3xl font-bold text-center text-gray-900 mb-8">
            Welcome to React Auth!
          </h1>

          <div className="bg-gray-50 rounded-lg p-4 mb-8 overflow-auto">
            <pre className="text-sm text-gray-700">
              <code>{JSON.stringify(props.loaderData, null, 2)}</code>
            </pre>
          </div>

          <div className="flex flex-col sm:flex-row justify-center items-center space-y-4 sm:space-y-0 sm:space-x-4">
            <Form method="post">
              <button
                type="submit"
                className="w-full sm:w-auto bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition duration-150 ease-in-out"
              >
                Logout
              </button>
            </Form>
          </div>
        </div>
      </div>
    </div>
  );
}

Step 3 - Create Axios Interceptor for response

Here, things get a bit more complicated, but don't worry, I will explain everything.

The final code for axios client will look like this:

import axios from "axios";

/**
 * A class to intercept Axios requests and handle token-based authentication.
 * It retries unauthorized (401) requests after refreshing the access token.
 */
class AxiosInterceptor {
  /**
   * Creates an AxiosInterceptor instance.
   * @param {object} [instanceConfig={}] - Configuration for the Axios instance.
   */
  constructor(instanceConfig = {}) {
    this.isRefreshing = false; // Tracks if a token refresh is in progress
    this.refreshSubscribers = []; // Queue for requests waiting for the token to refresh

    // Initialize Axios instance with provided configuration
    this.axiosInstance = axios.create({
      ...instanceConfig,
    });

    // Add request interceptor
    this.axiosInstance.interceptors.request.use(
      (config) => {
        const accessToken = this.getAccessToken();
        if (accessToken) {
          config.headers.Authorization = `Bearer ${accessToken}`;
        }
        return config;
      },
      (error) => Promise.reject(error),
    );

    // Add response interceptor
    this.axiosInstance.interceptors.response.use(
      (response) => response,
      async (error) => {
        const originalRequest = error.config;

        if (
          error.response &&
          error.response.status === 401 &&
          error.response.data.message === "TokenExpiredError" &&
          !originalRequest._retry
        ) {
          if (!this.isRefreshing) {
            this.isRefreshing = true;

            try {
              const newTokens = await this.refreshTokens();
              this.setAccessToken(newTokens.accessToken);
              this.setRefreshToken(newTokens.refreshToken);

              this.refreshSubscribers.forEach((callback) =>
                callback(newTokens.accessToken),
              );
              this.refreshSubscribers = [];

              return this.axiosInstance(originalRequest);
            } catch (refreshError) {
              this.refreshSubscribers = []; // Clear the queue in case of failure
              this.setAccessToken("");
              this.setRefreshToken("");
              return Promise.reject(refreshError);
            } finally {
              this.isRefreshing = false;
            }
          }

          return new Promise((resolve) => {
            this.refreshSubscribers.push((newAccessToken) => {
              originalRequest.headers.Authorization = `Bearer ${newAccessToken}`;
              originalRequest._retry = true;
              resolve(this.axiosInstance(originalRequest));
            });
          });
        }

        return Promise.reject(error);
      },
    );

    // Bind instance methods for convenience
    /**
     * Makes a GET request.
     * @type {import('axios').AxiosInstance['get']}
     */
    this.get = this.axiosInstance.get.bind(this.axiosInstance);

    /**
     * Makes a POST request.
     * @type {import('axios').AxiosInstance['post']}
     */
    this.post = this.axiosInstance.post.bind(this.axiosInstance);

    /**
     * Makes a PUT request.
     * @type {import('axios').AxiosInstance['put']}
     */
    this.put = this.axiosInstance.put.bind(this.axiosInstance);

    /**
     * Makes a DELETE request.
     * @type {import('axios').AxiosInstance['delete']}
     */

    this.delete = this.axiosInstance.delete.bind(this.axiosInstance);
  }

  /**
   * Retrieves the current access token from localStorage.
   * @returns {string|null} The access token or null if not available.
   */
  getAccessToken() {
    return localStorage.getItem("accessToken");
  }

  /**
   * Stores a new access token in localStorage.
   * @param {string} token - The new access token.
   */
  setAccessToken(token) {
    localStorage.setItem("accessToken", token);
  }

  /**
   * Retrieves the current refresh token from localStorage.
   * @returns {string|null} The refresh token or null if not available.
   */
  getRefreshToken() {
    return localStorage.getItem("refreshToken");
  }

  /**
   * Stores a new refresh token in localStorage.
   * @param {string} token - The new refresh token.
   */
  setRefreshToken(token) {
    localStorage.setItem("refreshToken", token);
  }

  /**
   * Refreshes the authentication tokens by calling the refresh endpoint.
   * @returns {Promise<{ accessToken: string, refreshToken: string }>} The new access and refresh tokens.
   * @throws {Error} If the token refresh request fails.
   */
  async refreshTokens() {
    const refreshToken = this.getRefreshToken();
    if (!refreshToken) {
      throw new Error("No refresh token available");
    }

    const response = await this.axiosInstance.post("/auth/refreshToken", {
      refreshToken,
    });
    return response.data; // Expecting { accessToken: string, refreshToken: string }
  }
}

// Export a pre-configured instance of AxiosInterceptor
export const client = new AxiosInterceptor({
  baseURL: "http://localhost:5000/api/v1",
});

The workflow can be seen in this diagram:

Now, let's take it step by step.

The queue implementation

We need to keep track of the requests that are waiting for the token to refresh. We will use an array called refreshSubscribers for this, where we put the requests that failed at the same time when we tried to refresh the token. When is this usefull? When we have multiple calls in paralel. If we make 4 requests, we probably don't want each of them to trigger a refreshToken. In that case, only the first one triggers it, and the other ones are put in the queue, and retried after the refresh is finished.

Refresh token logic

When we receive a 401 error, we check if the error is caused by the fact the token is expired;
If it is, we check if we are already refreshing the token;
- If we are, we add the request to the queue and we return a promise that will be resolved when the token is refreshed;
- If not, we set the isRefreshing flag to true and we call the refreshTokens function;
- If the refresh is successful, we save the new tokens in localStorage, we call the requests from the queue and we clear the queue;
- If the refresh fails, we clear the queue and we remove the tokens from localStorage.

Conclusion

And that's it. Now, by using axios interceptors, your app should automatically add the access token to the header and also handle the refresh token silently, in order to keep the user authenticated 🎉🎉🎉.

A beginners guide to building a Flask API with Prisma

Mihai-Adrian Andrei — Fri, 01 Jul 2022 14:08:54 +0000

Hello 👋! In this guide, we will learn how to build an API connected to a database using Prisma.

First, let's create a new virtual environment: python -m venv env and activate it. On windows, you can do .\env\Scripts\activate.

Now, let's install the packages we need for this project:



pip install flask prisma

After that is done, create a new file called app.py, and let's put some boilerplate in order to check our flask app works.



from flask import Flask

app = Flask(__name__)

@app.route('/', methods=['GET'])
def index():
  return {
    "ping": "pong"
  }


if __name__ == "__main__":
  app.run(debug=True, port=5000, host='0.0.0.0')

Now, if you start your app with python app.py and go to http://127.0.0.1:5000/ you should see your endpoint response 🎉.

Database model

Let's get to the prisma part. First, we need to model our database. In our example, let's have users and posts.
I will be using sqlite, but if you want to use something else, like postgres, you will need to change the provider and url, for example:



datasource db {
  provider = "postgresql"
  url      = "postgresql://postgres_user:postgres_password@localhost:5432/db_name"
}

Create a file called schema.prisma and inside it put the following:



datasource db {
  provider = "sqlite"
  url      = "file:database.db"
}

generator db {
  provider  = "prisma-client-py"
  interface = "sync"
}

model User {
  id        Int      @id @default(autoincrement())
  createdAt DateTime @default(now())
  email     String   @unique
  name      String?
  posts     Post[]
}

model Post {
  id        Int      @id @default(autoincrement())
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
  published Boolean  @default(false)
  title     String
  author    User    @relation(fields: [authorId], references: [id])
  authorId  Int
}

Here, we have a one to many relationship between user and post.
In order to learn more about how to build relationships in Prisma schema, you can check the official js documentation.

Now, let's create the database with Prisma. You can do it by creating a migration using:



prisma migrate dev

and providing a name for the migration, for example, init.
After that, you will have a sqlite database inside the root folder.

Python and Prisma

Now, on the python side.
Let's register Prisma inside Flask.



from flask import Flask
from prisma import Prisma, register

db = Prisma()
db.connect()
register(db)
app = Flask(__name__))

# rest of the file
...

Routes

I like to keep routes organized, so let's create a folder called routes and inside it, a file called user.py with the following content:



from flask import Blueprint, request
from prisma.models import User

user_blueprint = Blueprint('user', __name__)

@user_blueprint.route('/', methods=['GET','POST'])
def list_create():
  if request.method == 'GET':
    users = User.prisma().find_many(include={'posts': True})
    return {
      "data": [user.dict() for user in users]
    }

  if request.method == 'POST':
    data = request.json

    if data is None:
      return

    name = data.get('name')
    email = data.get('email')

    if name is None or email is None:
      return {"error": "You need to provide name and email"}

    user = User.prisma().create(data={'email': email, 'name': name})

    return dict(user)

After that, we need to register the blueprint inside app.py.



from flask import Flask
from prisma import Prisma, register
from routes.user import user_blueprint
# from routes.post import post_blueprint

db = Prisma()
db.connect()
register(db)

app = Flask(__name__)

@app.route('/', methods=['GET'])
def index():
  return {
    "ping": "pong"
  }

app.register_blueprint(user_blueprint, url_prefix='/user')
# app.register_blueprint(post_blueprint, url_prefix='/post')

if __name__ == "__main__":

  app.run(debug=True, port=5000, threaded=True)

And now, if we hit the endpoint http://127.0.0.1:5000/user with a POST method with the following payload:



{
    "name": "Mihai2",
    "email": "mihai2@test.com"
}

We will receive the created user:



{
    "data": [
        {
            "createdAt": "Fri, 01 Jul 2022 07:25:34 GMT",
            "email": "mihai2@test.com",
            "id": 1,
            "name": "Mihai2",
            "posts": null
        }
    ]
}

Now, let me explain a bit the prisma part. Every model that we created in our prisma.schema is now available in prisma.models and can be used like this:



from prisma.models import User

By using that model, we can make specific queries like create, update, find_many and so on. You can check all the queries here and the model based access here.
If the request method is GET, we are retrieving every user from the database and after that, we use list comprehension in order to format it as a list of dictionaries ( we need to do it because of Flask since we can't just return that model). If the request is POST, we create that record in the database and return it as a dictionary.
Prisma provides a very good autocomplete, so if you're using VSCode, ctrl + space is your best friend 😀 and most of the time, you will not even need the documentation.

Now, let's do the post routes. Similarly, in the routes folder we create a post.py file with a blueprint.



from flask import Blueprint, request
from prisma.models import Post

post_blueprint = Blueprint('post', __name__)

@post_blueprint.route('/', methods=['GET','POST'])
def list_create():
  if request.method == 'GET':
    posts = Post.prisma().find_many()
    return {
      "data": [post.dict(exclude={'author'}) for post in posts]
    }

  if request.method == 'POST':
    data = request.json

    if data is None:
      return

    title = data.get('title')
    published = data.get('published')
    authorId = data.get('authorId')

    if title is None or published is None or authorId is None:
      return {"error": "You need to provide title, published and authorId"}

    post = Post.prisma().create(data={'title': title, 'authorId': authorId, 'published': published })


    return post.dict()

@post_blueprint.route('/<int:id>', methods=['GET','PUT', 'DELETE'])
def view_update_delete(id):
  if request.method == 'GET':

    post = Post.prisma().find_unique(where={'id': id}, include={'author': True})
    if post is None:
      return {'error': 'Post doesn`t exist'}, 404

    return post.dict()

  if request.method == 'PUT':
    data = request.json

    if data is None:
      return

    title = data.get('title')
    published = data.get('published')
    authorId = data.get('authorId')

    if title is None or published is None or authorId is None:
      return {"error": "You need to provide title, published and authorId"}

    post = Post.prisma().update(where={'id': id }, include={'author': True}, data={'title': title, 'published': published, 'author': {'connect': {'id': authorId}}})

    if post is None:
      return {'error': 'Post doesn`t exist'}, 404

    return post.dict()

  if request.method == 'DELETE':
    post = Post.prisma().delete(where={'id': id})
    if post is None:
      return {'error': 'Post doesn`t exist'}, 404

    return post.dict(exclude={'author'})
```

And add the blueprint to `app.py`.
```python
from routes.post import post_blueprint
app.register_blueprint(post_blueprint, url_prefix='/post')
```

For the post routes, we created a full CRUD API. The list and create endpoints are the same as for the user. Additionally, we created the `view_update_delete` function that handles 3 types of requests:
- GET http://127.0.0.1:5000/post/1 -> we retrieve a record from the database with the specific id and return it.
- PUT http://127.0.0.1:5000/post/ -> we update a record in the database with the specific id and the payload provided and return the updated record.
Payload example:
```
{
    "title": "Post1 updated",
    "published": false,
    "authorId": 1
}
```
- DELETE http://127.0.0.1:5000/post/1 -> we delete that record from the database and return it.

And that's it 🎉! Now you can start the app and maybe add more functionalities because it is easy to interact with a database with Prisma.

I really enjoyed using Prisma in javascript, and I am glad that [Robert](https://github.com/RobertCraigie) created a [client for python](https://github.com/RobertCraigie/prisma-client-py). 🔥🔥

If you have any questions, we can discuss them in the comments. 💬

How to monitor ETH Transactions using Web3.js

Mihai-Adrian Andrei — Thu, 23 Jun 2022 10:30:39 +0000

In order to monitor ETH transactions, we need an Ethereum node. We can use one provided by Infura for free. You just need to sign up on Infura and create a new project.

From the project settings, we get a http provider:

ex: https://ropsten.infura.io/v3/775214aeabb642a5b93e138293d83a1e

You will need to change 775214aeabb642a5b93e138293d83a1e with your project id.

Don't worry, I deleted the project so the keys from the picture will not work 😀. Get your own keys.

Now, let's install web3 and node-cron with the following command:

npm install web3
npm install node-cron

Monitor Ethereum class

After that, create a file monitor.js and paste the following code:

const Web3 = require("web3");

class MonitorEth {
  constructor(httpProvider) {
    this.web3 = new Web3(new Web3.providers.HttpProvider(httpProvider));
    this.lastSyncedBlock = null;
  }

  async initializeLastSyncedBlock() {
    this.lastSyncedBlock = await this.getLastBlockNumber();
  }

  async getBlock(blockNumber) {
    return this.web3.eth.getBlock(blockNumber, true);
  }

  async getLastBlockNumber() {
    return this.web3.eth.getBlockNumber();
  }

  async searchTransaction(to) {
    const lastBlock = await this.getLastBlockNumber();
    console.log(`Searching blocks: ${this.lastSyncedBlock + 1} - ${lastBlock}`);

    for (
      let blockNumber = this.lastSyncedBlock + 1;
      blockNumber < lastBlock;
      blockNumber++
    ) {
      const block = await this.getBlock(blockNumber);

      if (!block?.transactions) {
        continue;
      }
      for (const tx of block.transactions) {
        if (!tx?.to) {
          continue;
        }
        if (tx.to.toLowerCase() === to.toLowerCase()) {
          console.log(tx);
        }
      }
    }
    this.lastSyncedBlock = lastBlock;
    console.log(
      `Finished searching blocks: ${this.lastSyncedBlock + 1} - ${lastBlock}`
    );
  }
}

module.exports = MonitorEth;

In the constructor, we create our Web3 instance in order to interact with the Ethereum chain. Also, we created a method that will initialize our app and will save the last block number that we scanned. ( Probably, you will save this in your database in order to not lose it if your app goes down ).

After that, we created 2 methods that we need in order to get more information from the chain:

getLastBlockNumber -> Will fetch the number of the last block mined.
getBlock -> Will fetch the block information from the node and it will contain all the transactions present in that block.

And at the end, the method searchTransaction. This gets the block data from the chain between our last synced block, and the current last block from the chain, and checks if there is any transaction that matches our to address -> with the following condition: tx.to.toLowerCase() === to.toLowerCase()

Main script

Now, let's create our main script app.js.

First, we need to import node-cron and our monitor class.

const cron = require("node-cron");
const MonitorEth = require("./monitor");

After that, we need our endpoint from Infura and the address that we want to monitor.

const httpProvider =
  "https://ropsten.infura.io/v3/775214aeabb642a5b93e138293d83a1e";
const to = "0xd8588cc99979a961De7f2Ca3532477A4221BFb79";

The last thing we need to do is create an instance of our monitor class, initialize the last block, and create a cron.

const cron = require("node-cron");
const MonitorEth = require("./monitor");

const httpProvider =
  "https://ropsten.infura.io/v3/775214aeabb642a5b93e138293d83a1e";
const to = "0xd8588cc99979a961De7f2Ca3532477A4221BFb79";

async function main() {
  try {
    const monitor = new MonitorEth(httpProvider);
    await monitor.initializeLastSyncedBlock();
    console.log('Looking for transactions...')

    cron.schedule("*/2 * * * *", async () => {
      console.log('Cron started.')
      await monitor.searchTransaction(to);
      console.log('Cron finished.')

    });
  } catch (error) {
    console.log(error);
  }
}

main();

Here, our cron will be fired every 2 minutes. If you want to learn more about cron times, you can check https://crontab.guru/.

After that, you can just start it with node app.js and make a transaction to your to address.

Here it is an example of what it will look like:

$ node app.js 
Looking for transactions...
Cron started.
Searching blocks: 12451460 - 12451563
{
  accessList: [],
  blockHash: '0xb0df4a27e1c77df495a32324650e06e9fa8138c8f9a3910fb3562b4156d5f37c',
  blockNumber: 12451460,
  chainId: '0x3',
  from: '0xeE1D1D01A7a5fCa456006b0458693723E61427f6',
  gas: 21000,
  gasPrice: '227691906143',
  hash: '0xaf96ccf776e47adf8f8724f3222bb9068d5287c9bc50bd69d2bf3fa90e3889c1',
  input: '0x',
  maxFeePerGas: '257616117457',
  maxPriorityFeePerGas: '38800000000',
  nonce: 24,
  r: '0x59946a27e3d0c452843b9780c8072ca17f81bce410430a722013a6a08084d7f9',
  s: '0x4be019582ba83865bbc28790ff26ec767ae2bbcb6e610947ea00ba17d5d01de9',
  to: '0xd8588cc99979a961De7f2Ca3532477A4221BFb79',
  transactionIndex: 2,
  type: 2,
  v: '0x1',
  value: '10000000000000000'
}
Finished searching blocks: 12451564 - 12451563
Cron finished.
Cron started.
Searching blocks: 12451564 - 12451567
Finished searching blocks: 12451568 - 12451567
Cron finished.
Cron started.
Searching blocks: 12451568 - 12451572
Finished searching blocks: 12451573 - 12451572
Cron finished.
Cron started.
Searching blocks: 12451573 - 12451577
Finished searching blocks: 12451578 - 12451577
Cron finished.

In the above example, I made a transaction of 0.01 ETH that you can check here.
As you can see, the value is actually 10000000000000000 because that is in WEI, not ETH. You can find the ETH value by using: https://eth-converter.com/.

And, that's it. Now you can monitor incoming transactions to one of your addresses. 🎉🎉🎉

JWT Authentication using Prisma and Express

Mihai-Adrian Andrei — Mon, 14 Feb 2022 13:52:57 +0000

All articles are first published on my site.

I wrote a blog post two years ago. It started like this:

After long research, I finally got an implementation of an authentication workflow that I like. Please note that I don't think this implementation is perfect, but, for my use cases, it will work perfectly. Also, this article does not handle any kind of validation or email verification. It explains only the JWT Token implementation.

Two years later, I have different opinions. Back then, I used a refresh token as jwt. Why? Because that's how I learned it. Now, I propose this one can be a random string. You can think of a refresh token as a session id. You check the session in the database. The Access Token ( JWT ) just acts as a "caching mechanism" to not check the db for every request.

While I advocate for using session authentication with http only cookies when possible, there are cases where this approach might be harder to use, such as in a microservices architecture. If you find yourself needing to implement JWT authentication, let me guide you through an improved method.

Part 1: Workflow

We are going to implement the following endpoints:

For /auth/login and /auth/register, the client needs to provide a user and a password in exchange for a pair of tokens ( access token and refresh token ).
With the access token, a request can be made to /users/profile. Here, the following workflow will be applied:

Note: We only check if the token is valid. This way, we keep our workflow stateless. Because of that, the access token should expire fast ( 5/10 minutes ).

In order to keep the user logged in, the client needs to make a request to /auth/refreshToken containing the refreshToken received on register/login.
Based on that token, on the server we will make some checks and provide a new pair of tokens. The process is explained in the following diagram.

Now, let's move to the coding part.

Part 2 Code

The code for this implementation can be found here.

Note My suggestion is to store both of the tokens in HTTP Only Cookies. If this is not possible because your frontend doesn't have a BFF (Backend For Frontend) you could store the access token in memory and the refresh token in localStorage. Just make sure your frontend logic is safe against XSS attacks.

Step 1: Create the app

When I write javascript code on the backend, I prefer to use a boilerplate made by Coding Garden.
In order to use CJ's boilerplate, we can run the following code from the terminal.

npx create-express-api -d auth-server
cd auth-server
npm install
npm run dev

Now, you can test your server with a GET request on http://localhost:5000/api/v1/.

Step 2: Install dependencies and setup env variables

npm install -dev prisma
npm install @prisma/client bcrypt jsonwebtoken
npx prisma init --datasource-provider sqlite

Add the following inside .env.

JWT_ACCESS_SECRET=SECRET123

Step 3: Prisma setup

Inside prisma/schema.prisma, we will define our database model. Paste the following.

model User {
  id            String         @id @unique @default(uuid())
  email         String         @unique
  password      String
  refreshTokens RefreshToken[]
  createdAt     DateTime       @default(now())
  updatedAt     DateTime       @updatedAt
}

model RefreshToken {
  id          String   @id @unique @default(uuid())
  hashedToken String   @unique
  userId      String
  User        User     @relation(fields: [userId], references: [id], onDelete: Cascade)
  revoked     Boolean  @default(false)
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt
  expireAt    DateTime
}

And run npx prisma migrate dev in the console.

Now, we have everything ready for writing our authentication logic.

We are going to use 2 tables. The user table is self-explanatory. The refresh token table is going to be used as a Whitelist for the tokens that we generate as explained in part 1.

Step 4: Add utility functions.

Create a folder called utils inside src. Here, we will add the following files:

db.js - used for database interaction with prisma.

const { PrismaClient } = require('@prisma/client');

const db = new PrismaClient();

module.exports = { db };

jwt.js - used for token generation.

const jwt = require('jsonwebtoken');
const crypto = require('crypto');

// Usually I keep the token between 5 minutes - 15 minutes
function generateAccessToken(user) {
  return jwt.sign({ userId: user.id }, process.env.JWT_ACCESS_SECRET, {
    expiresIn: '5m',
  });
}

// Generate a random string as refreshToken
function generateRefreshToken() {
  const token = crypto.randomBytes(16).toString('base64url');
  return token;
}

function generateTokens(user) {
  const accessToken = generateAccessToken(user);
  const refreshToken = generateRefreshToken();
  return { accessToken, refreshToken };
}

module.exports = {
  generateAccessToken,
  generateRefreshToken,
  generateTokens,
};

hashToken.js - used to hash the token before saving it to the database.

const crypto = require('crypto');

function hashToken(token) {
  return crypto.createHash('sha512').update(token).digest('hex');
}

module.exports = { hashToken };

Step 5: Project structure

Delete the emojis.js from src/api and cleanup api/index.js by removing emojis route.

Create 2 folders: auth and users inside src/api. In each folder, we will create 2 files for routes and services.

 ┣ 📂src
 ┃ ┣ 📂api
 ┃ ┃ ┣ 📂auth
 ┃ ┃ ┃ ┣ 📜auth.routes.js
 ┃ ┃ ┃ ┗ 📜auth.services.js
 ┃ ┃ ┣ 📂users
 ┃ ┃ ┃ ┣ 📜users.routes.js
 ┃ ┃ ┃ ┗ 📜users.services.js
 ┃ ┃ ┗ 📜index.js
 ┃ ┣ 📂utils
 ┃ ┃ ┣ 📜db.js
 ┃ ┃ ┣ 📜hashToken.js
 ┃ ┃ ┣ 📜jwt.js
 ┃ ┃ ┗ 📜sendRefreshToken.js

Step 6: Services

Now, inside user.services.js paste the following code:

const bcrypt = require('bcrypt');
const { db } = require('../../utils/db');

function findUserByEmail(email) {
  return db.user.findUnique({
    where: {
      email,
    },
  });
}

function createUserByEmailAndPassword(user) {
  user.password = bcrypt.hashSync(user.password, 12);
  return db.user.create({
    data: user,
  });
}

function findUserById(id) {
  return db.user.findUnique({
    where: {
      id,
    },
  });
}

module.exports = {
  findUserByEmail,
  findUserById,
  createUserByEmailAndPassword,
};

Most of the code is self-explanatory, but as a summary, we define some helpers specific to the User table that we are going to use in the project.

Now, the code for auth.services.js.

const { db } = require('../../utils/db');
const { hashToken } = require('../../utils/hash');

// used when we create a refresh token.
// a refresh token is valid for 30 days
// that means that if a user is inactive for more than 30 days, he will be required to log in again
function addRefreshTokenToWhitelist({ refreshToken, userId }) {
  return db.refreshToken.create({
    data: {
      hashedToken: hashToken(refreshToken),
      userId,
      expireAt: new Date(Date.now() + 1000 * 60 * 60 * 24 * 30), // 30 days
    },
  });
}

// used to check if the token sent by the client is in the database.
function findRefreshToken(token) {
  return db.refreshToken.findUnique({
    where: {
      hashedToken: hashToken(token),
    },
  });
}

// soft delete tokens after usage.
function deleteRefreshTokenById(id) {
  return db.refreshToken.update({
    where: {
      id,
    },
    data: {
      revoked: true,
    },
  });
}

function revokeTokens(userId) {
  return db.refreshToken.updateMany({
    where: {
      userId,
    },
    data: {
      revoked: true,
    },
  });
}

module.exports = {
  addRefreshTokenToWhitelist,
  findRefreshToken,
  deleteRefreshTokenById,
  revokeTokens,
};

Now, we have everything in place to write our routes.

Step 7: Auth Routes.

Let's make the /register endpoint. Inside auth.routes.js put the following code:

const express = require('express');
const bcrypt = require('bcrypt');
const { generateTokens } = require('../../utils/jwt');
const {
  addRefreshTokenToWhitelist,
  findRefreshToken,
  deleteRefreshTokenById,
  revokeTokens,
} = require('./auth.services');

const router = express.Router();
const {
  findUserByEmail,
  createUserByEmailAndPassword,
  findUserById,
} = require('../user/user.services');

router.post('/register', async (req, res, next) => {
  try {
    const { email, password } = req.body;
    if (!email || !password) {
      res.status(400);
      throw new Error('You must provide an email and a password.');
    }

    const existingUser = await findUserByEmail(email);

    if (existingUser) {
      res.status(400);
      throw new Error('Email already in use.');
    }

    const user = await createUserByEmailAndPassword({ email, password });
    const { accessToken, refreshToken } = generateTokens(user);
    await addRefreshTokenToWhitelist({ refreshToken, userId: user.id });

    res.json({
      accessToken,
      refreshToken,
    });
  } catch (err) {
    next(err);
  }
});

module.exports = router;

Here, we take the email/password from the user. We make some basic validation ( you will need to add some validation steps here ( for example, use yup or joi ). We create the user, the tokens, and we add the refresh token to the whitelist ( check diagram 1 for the flow).
In order for the route to be recognised by our app, we need to add some code inside src/api/index.js:

const auth = require('./auth/auth.routes');
router.use('/auth', auth);

You can now test the endpoint by making a post request to http://localhost:5000/api/v1/auth/register. The response will be:

{
    "accessToken": "generatedAccessToken...",
    "refreshToken": "generatedRefreshToken..."
}

Let's move to the login endpoint. This one is very similar to the register one.

router.post('/login', async (req, res, next) => {
  try {
    const { email, password } = req.body;
    if (!email || !password) {
      res.status(400);
      throw new Error('You must provide an email and a password.');
    }

    const existingUser = await findUserByEmail(email);

    if (!existingUser) {
      res.status(403);
      throw new Error('Invalid login credentials.');
    }

    const validPassword = await bcrypt.compare(password, existingUser.password);
    if (!validPassword) {
      res.status(403);
      throw new Error('Invalid login credentials.');
    }

    const { accessToken, refreshToken } = generateTokens(existingUser);
    await addRefreshTokenToWhitelist({ refreshToken, userId: existingUser.id });

    res.json({
      accessToken,
      refreshToken,
    });
  } catch (err) {
    next(err);
  }
});

Now you can test the login endpoint by providing an existing user/password combination via a POST request to http://localhost:5000/api/v1/auth/login. If it is successful, you will get a response containing an access token and a refresh token.

Next, we will add the refresh_token endpoint and a test endpoint for revoking all tokens. Here is all the code for auth.routes.ts:

const express = require('express');
const bcrypt = require('bcrypt');
const { generateTokens } = require('../../utils/jwt');
const {
  addRefreshTokenToWhitelist,
  findRefreshToken,
  deleteRefreshTokenById,
  revokeTokens,
} = require('./auth.services');

const router = express.Router();
const {
  findUserByEmail,
  createUserByEmailAndPassword,
  findUserById,
} = require('../user/user.services');

router.post('/register', async (req, res, next) => {
  try {
    const { email, password } = req.body;
    if (!email || !password) {
      res.status(400);
      throw new Error('You must provide an email and a password.');
    }

    const existingUser = await findUserByEmail(email);

    if (existingUser) {
      res.status(400);
      throw new Error('Email already in use.');
    }

    const user = await createUserByEmailAndPassword({ email, password });
    const { accessToken, refreshToken } = generateTokens(user);
    await addRefreshTokenToWhitelist({ refreshToken, userId: user.id });

    res.json({
      accessToken,
      refreshToken,
    });
  } catch (err) {
    next(err);
  }
});

router.post('/login', async (req, res, next) => {
  try {
    const { email, password } = req.body;
    if (!email || !password) {
      res.status(400);
      throw new Error('You must provide an email and a password.');
    }

    const existingUser = await findUserByEmail(email);

    if (!existingUser) {
      res.status(403);
      throw new Error('Invalid login credentials.');
    }

    const validPassword = await bcrypt.compare(password, existingUser.password);
    if (!validPassword) {
      res.status(403);
      throw new Error('Invalid login credentials.');
    }

    const { accessToken, refreshToken } = generateTokens(existingUser);
    await addRefreshTokenToWhitelist({ refreshToken, userId: existingUser.id });

    res.json({
      accessToken,
      refreshToken,
    });
  } catch (err) {
    next(err);
  }
});

router.post('/refreshToken', async (req, res, next) => {
  try {
    const { refreshToken } = req.body;
    if (!refreshToken) {
      res.status(400);
      throw new Error('Missing refresh token.');
    }
    const savedRefreshToken = await findRefreshToken(refreshToken);

    if (
      !savedRefreshToken
      || savedRefreshToken.revoked === true
      || Date.now() >= savedRefreshToken.expireAt.getTime()
    ) {
      res.status(401);
      throw new Error('Unauthorized');
    }

    const user = await findUserById(savedRefreshToken.userId);
    if (!user) {
      res.status(401);
      throw new Error('Unauthorized');
    }

    await deleteRefreshTokenById(savedRefreshToken.id);
    const { accessToken, refreshToken: newRefreshToken } = generateTokens(user);
    await addRefreshTokenToWhitelist({ refreshToken: newRefreshToken, userId: user.id });

    res.json({
      accessToken,
      refreshToken: newRefreshToken,
    });
  } catch (err) {
    next(err);
  }
});

// This endpoint is only for demo purpose.
// Move this logic where you need to revoke the tokens( for ex, on password reset)
router.post('/revokeRefreshTokens', async (req, res, next) => {
  try {
    const { userId } = req.body;
    await revokeTokens(userId);
    res.json({ message: `Tokens revoked for user with id #${userId}` });
  } catch (err) {
    next(err);
  }
});

module.exports = router;

The /revokeRefreshTokens should not be exposed in the api. You should call the revokeTokens method only in a specific case where you would like to invalidate all the tokens ( ex: password reset ).
As for the refresh_token endpoint, it is used to get another pair of tokens, in order to keep the user logged. We check if the sent refresh token is valid and if it is in our database and it is not revoked. If those conditions are met, we invalidate the previous refresh token and generate a new pair of tokens.

Step 8: Protected Routes.

First, in order to protect our routes, we need to define a middleware. Go to src/middlewares.js and add the following code:

function isAuthenticated(req, res, next) {
  const { authorization } = req.headers;

  if (!authorization) {
    res.status(401);
    throw new Error('🚫 Un-Authorized 🚫');
  }

  try {
    const token = authorization.split(' ')[1];
    const payload = jwt.verify(token, process.env.JWT_ACCESS_SECRET);
    req.payload = payload;
  } catch (err) {
    res.status(401);
    if (err.name === 'TokenExpiredError') {
      throw new Error(err.name);
    }
    throw new Error('🚫 Un-Authorized 🚫');
  }

  return next();
}

module.exports = {
    // ... other modules
    isAuthenticated
}

We check if the client sends an Authorization header. The format should be: Bearer token. If the token is present, we verify it with our secret and add it to the request so it can be accessed in the routes.

NOTE: We only check if the token is valid. This way, we keep our workflow stateless.
Question: What happens if the user is deleted or the refresh tokens are invalidated?
Answer: The user will still have access until the access token expire. This will be for a maximum of 5 minutes ( that's why our access tokens expire fast). In my opinion, this will suit most of the apps ( Of course, if you develop a banking app, it might not work. But for most of the apps, it will be alright. For example, imagine you build an app that has some free and premium content. The user pays you for 30 days of premium content. After 30 days, you will decrease his access, but if he already had a token, he will still be able to access the content for 5 more minutes. Based on this logic, you can set your expire time for access token accordingly.

Now, let's write the protected route. Go to src/api/users/users.routes.js and add the following code:

const express = require('express');
const { isAuthenticated } = require('../../middlewares');
const { findUserById } = require('./user.services');

const router = express.Router();

router.get('/profile', isAuthenticated, async (req, res, next) => {
  try {
    const { userId } = req.payload;
    const user = await findUserById(userId);
    delete user.password;
    res.json(user);
  } catch (err) {
    next(err);
  }
});

module.exports = router;

And inside src/api/index.js:

const express = require('express');
const auth = require('./auth/auth.routes');
const users = require('./user/user.routes');

const router = express.Router();

router.get('/', (req, res) => {
  res.json({
    message: 'API - 👋🌎🌍🌏',
  });
});

router.use('/auth', auth);
router.use('/users', users);

module.exports = router;

Now, you can make a GET request to http://localhost:5000/api/v1/users/profile. You will need to add an Authorization header with the access token that you got from the /login endpoint.

And that's it.🎉🎉🎉

How to use Python with Notion API

Mihai-Adrian Andrei — Thu, 06 Jan 2022 14:31:36 +0000

All articles are published first on my site.

Everybody uses Notion. And why not? It is an awesome tool. But what if you want to also add it to some of your apps? It seems you can now do it by using the Notion API and I will show how you can integrate it using Python.

Notion setup

First, you need to create a page that contains a database in Notion. In this example, we are going to make one that contains 3 fields: name, genre, and completed.

In order to have access to this page inside Python, we need to create an integration for it. For that, you can go to Settings => Connections => Develop or manage integrations => New integration. After that, you specify a name for your integration and click submit. In the end, you will get to this screen:

As you can see in the image, you now have a secret key. Copy that because we will need it in our Python program.

We need to do 2 more steps in Notion before starting to write some code:

We need to go on the notion page, click the Share button, press Connect to, and then you can select the integration that you just created from a list:

With the page opened in your browser, you will need a database id. Let's say the link is the following one: https://www.notion.so/19f00145217c4437afb06cfdbb2ad994?v=51972570a71c4b8b9b1feeec01e87eb5. The database id is 19f00145217c4437afb06cfdbb2ad994.

Python Setup

First, we need to install a package to make http requests.

pip install httpx

Then, we import the httpx library that we are going to use to interact with the Notion API. Then, we store the secret and database_id from the notion setup.

import httpx

token = 'secret_from_notion_integration'
database_id = 'database_id_from_link'

Next, we will use the httpx library to interact with the Notion API.

The first function we are going to create is getMovies.

def getMovies():
  url = f'https://api.notion.com/v1/databases/{database_id}/query'

  r = httpx.post(url, headers={
    "Authorization": f"Bearer {token}",
    "Notion-Version": "2022-06-28"
  })

  result_dict = r.json()
  movie_list_result = result_dict['results']

  print(movie_list_result)

Now, if you add a movie in Notion, and you call this function, you will see a lot of data. In order to make it more readable and use only the information we need, we will make a helper function:

def mapNotionResultToMovie(result):
  # you can print result here and check the format of the answer.
  movie_id = result['id']
  properties = result['properties']
  genre = properties['Genre']['rich_text'][0]['text']['content']
  name = properties['Name']['title'][0]['text']['content']
  completed = properties['Completed']['checkbox']

  return {
    'genre': genre,
    'name': name,
    'completed': completed,
    'movie_id': movie_id
  }

And call it inside getMovies. The function should contain the following code:

def getMovies():
  url = f'https://api.notion.com/v1/databases/{database_id}/query'

  r = httpx.post(url, headers={
    "Authorization": f"Bearer {token}",
    "Notion-Version": "2022-06-28"
  })

  result_dict = r.json()
  movie_list_result = result_dict['results']

  movies = []

  for movie in movie_list_result:
      movies.append(mapNotionResultToMovie(movie))

  return movies

Example of usage:

movies = getMovies()
# json.dumps is used to pretty print a dictionary 
print('Movie list:', movies)

Now, you can use this function to display your movies inside Python. Pretty cool, right 😁 ?

The next function we are going to implement is createMovie. For this one, we will need to construct a payload similar to the response from getMovies.

def createMovie(name, genre, completed=False):
  url = 'https://api.notion.com/v1/pages'

  payload = {
    "parent": {
      "database_id": database_id
    },
    "properties": {
      "Name": {
        "title": [
          {
            "text": {
              "content": name
            }
          }
        ]
      },
      "Genre": {
        "rich_text": [
          {
            "text": {
              "content": genre
            }
          }
        ]
      },
      "Completed": {
        "checkbox": completed
      }
    }}

  r = httpx.post(url, headers={
    "Authorization": f"Bearer {token}",
    "Notion-Version": "2022-06-28",
    "Content-Type": "application/json"
  }, json=payload)

  movie = mapNotionResultToMovie(r.json())
  return movie

You can use it like this:

createdMovie = createMovie('Movie1', 'Genre1', False)

print('Created Movie:', createdMovie)

If you check Notion, you will see that a new entry in the table was created. 🎉🎉🎉

The update function is pretty similar to the create one. The major difference is that we need to also take into consideration a movieId. We create the payload in a similar way, but we also add the movieId in the URL.

def updateMovie(movieId, movie):
  url = f'https://api.notion.com/v1/pages/{movieId}'

  payload = {
    "properties": {
      "Name": {
        "title": [
          {
            "text": {
              "content": movie['name']
            }
          }
        ]
      },
      "Genre": {
        "rich_text": [
          {
            "text": {
              "content": movie['genre']
            }
          }
        ]
      },
      "Completed": {
        "checkbox": movie['completed']
      }
    }}

  r = httpx.patch(url, headers={
    "Authorization": f"Bearer {token}",
    "Notion-Version": "2022-06-28",
    "Content-Type": "application/json"
  }, json=payload)

  movie = mapNotionResultToMovie(r.json())
  return movie

In order to use this function, you first need to call getMovies(). In that response, you can get a movieId (in the ex: fdd0fa87-4729-43e6-ae3f-823d48b382ee) and use it like this:

updatedMovie = updateMovie('fdd0fa87-4729-43e6-ae3f-823d48b382ee', {
  'name': 'UpdatedMovie1',
  'genre': 'UpdatedGenre1',
  'completed': True
})
print('Update movie', updatedMovie)

The last function that we are going to create is deleteMovie. In Notion, pages are using a property called archived. If we set that to true, then the page will be deleted. So, this function will use the update endpoint in order to change the value of the archived boolean.

def deleteMovie(movieId):
  url = f'https://api.notion.com/v1/pages/{movieId}'

  payload = {
    "archived": True
  }

  r = httpx.patch(url, headers={
    "Authorization": f"Bearer {token}",
    "Notion-Version": "2022-06-28",
    "Content-Type": "application/json"
  }, json=payload)

Now, you can use it with a movieId and if you check the database in Notion, that specific row will be deleted.

deleteMovie('a19e538d-10cc-40ec-91bb-f7237c93e428')

It is easier to interact with Notion from JavaScript because they provide a SDK client, and in Python, we don't have one, but that shouldn't stop you to use it 😁.

Nuxt3 App + Serverless API on Vercel

Mihai-Adrian Andrei — Fri, 17 Dec 2021 13:16:29 +0000

Nuxt3 is currently in beta, and we received a way to write API routes as you do in NextJS. However, I didn't find a way to deploy it to Vercel, their documentation is only specifying how to deploy it as a static app.

After some research, it seems it is not that hard. Here are the steps that you can follow to do it yourself:

Step 1 - Create a Nuxt3 project

Create a new Nuxt3 app using:



npx nuxi init nuxt3-vercel

After that, cd into that directory and install the dependencies:



cd nuxt3-vercel

# Using NPM
npm install 
# Using Yarn
yarn install

Step 2 - Create the API route and configure Nuxt.

Create a server folder. Inside that, an API folder with hello.ts. Copy the next snippet inside:



import type { IncomingMessage, ServerResponse } from "http";

export default async (req: IncomingMessage, res: ServerResponse) => {
  res.statusCode = 200;
  const result = {
    data: "Hello world!",
  };
  res.end(JSON.stringify(result));
};

The folder structure should be now:



📦nuxt3-vercel
 ┣ 📂node_modules
 ┣ 📂server
 ┃ ┗ 📂api
 ┃    ┗ 📜hello.ts
 ┣ 📜.gitignore
 ┣ 📜app.vue
 ┣ 📜nuxt.config.ts
 ┣ 📜package.json
 ┣ 📜README.md
 ┣ 📜tsconfig.json

Now, go to nuxt.config.ts and add the following:



import { defineNuxtConfig } from "nuxt3";

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
  nitro: {
    preset: "vercel",
  },
});

You can start your project by doing yarn dev or npm run dev, and you go to http://localhost:3000/api/hello you will see the response from our function 😊.

Step 3 - Pushing our code to GitHub ( you can go to step 4 if you already know how to do this )

First, you need to login to your profile on GitHub and press create a new repo near your profile:

After that, you select a name for your repo and press the create button:

In the end, you can follow the instructions from the screen:

For example:



git add .

git commit -m "init"

git remote add origin https://github.com/mihaiandrei97/nuxt3-vercel-deploy.git

git branch -M main

git push -u origin main

Step 4 - Deploying to Vercel

After that, select your repo and press Import.

Now, the most important step is the section Build and output settings. The build command should be yarn build or npm run build, depending on what you choose at the start of the project. The output directory needs to be .vercel_build_output (don't miss the dot here).

In the end, hit deploy, and voilà 🔥. The site is deployed.

You can check it live here and the repo here.

DEV Community: Mihai-Adrian Andrei

How to add Stripe to Astro

Integrating Stripe with Astro: A Step-by-Step Guide

Step 1: Creating a New Astro Project

Step 2: Installing Stripe

Step 3: Configuring Stripe

Step 4: Setting Up Stripe CLI for Webhooks

Step 5: Configuring Environment Variables

Step 6: Adding Tailwind CSS and Node.js

Step 7: Creating Stripe Checkout Action

Step 8: Rendering the Checkout Form

Step 9: Creating a Webhook for Stripe

Conclusion

How to add Supabase Auth to Astro

Supabase Authentication in Astro

Prerequisite: Create a GitHub OAuth App and Set it in the Supabase Dashboard

1. Create a GitHub OAuth App

2. Configure GitHub OAuth in Supabase

3. Set Environment Variables

App code

0. Install the dependencies

1. Create a Supabase Server Instance

2. Create a Supabase Admin Instance

3. Add Middleware for Authentication

4. Add callback for auth in pages/api/auth/callback.ts.

5. Create actions

6. Create a Login Page

7. Protect Pages with Authentication

Conclusion

Remix + Express + TS

How to Add TypeScript to a Remix + Express Project

Step 1: Clone the Official Express Starter

Step 2: Add Required Dependencies

Step 3: Create a TypeScript Server File

Step 4: Update Vite Configuration

Step 5: Update NPM Scripts

Conclusion

Remix + Express + TS

How to Add TypeScript to a Remix + Express Project

Step 1: Clone the Official Express Starter

Step 2: Add Required Dependencies

Step 3: Create a TypeScript Server File

Step 4: Update Vite Configuration

Step 5: Update NPM Scripts

Conclusion

Implementing Supabase Auth in Next13 with Prisma

Introduction

The Challenge of Using Supabase Auth with Prisma

The Solution: Creating a Custom profile Table with Database Triggers

Setting Up Your Next.js Project

Gathering Supabase Environment Variables

Installing Prisma and Configuring the Database

Setting Up Prisma Connection

Setting Up Supabase Login and Registration

Install Dependencies

Create a Middleware for Supabase

Implement Code Exchange Route

Create Supabase Client Components

Create app/_components/Login.tsx

Create app/_components/Logout.tsx

Creating the main application pages

Create app/page.tsx

Create app/login/page.tsx

Create app/admin/page.tsx

Conclusion

Building a FastAPI Application and Deploying it with Vercel

Setting up the Environment

Installing FastAPI and Uvicorn

Creating the FastAPI Application

Running the FastAPI Application Locally

Deploying the FastAPI Application with Vercel

Setting up Git and Pushing the Code

Deploying with Vercel

JWT Authentication using Axios interceptors

Project explanation

Step 1 - Create Axios Interceptor for request

Step 2 - Create the services

Step 3 - Create Axios Interceptor for response

The queue implementation

Refresh token logic

4. Add callback for auth in `pages/api/auth/callback.ts`.

The Solution: Creating a Custom `profile` Table with Database Triggers

Create `app/_components/Login.tsx`

Create `app/_components/Logout.tsx`

Create `app/page.tsx`

Create `app/login/page.tsx`

Create `app/admin/page.tsx`