Forem: Adrien Fischer

Stripe webhooks with NextJS

Adrien Fischer — Mon, 01 May 2023 07:09:49 +0000

Before we start

Stripe webhooks enable receiving notifications when an event occurs in your stripe account, such as payment or subscription creation, customer creation, among others.

Data received varies depending on the event: payment intent id, amount, currency, etc., for payment creation, for example.

This NextJS tutorial focuses on webhook management solely, not stripe integration for your application. Assuming that you have a stripe account and prior knowledge in payment intent or customer creation, we will cover setting up a webhook handler in NextJS.

Setup webhook in Stripe

Go to your stripe dashboard, then click on the "Developers" tab, then on "Webhooks".

Then click on "Add endpoint".

The url is the url of your NextJS application. For instance, if your application is deployed on Vercel, it will be something like https://your-app.vercel.app/api/webhooks.

Then, you need to choose the events you want to listen to. For instance, if you want to listen to the payment_intent.succeeded event, you need to select "Payment intent succeeded" in the "Event types" dropdown.

Then click on "Add endpoint".

Create a webhook handler

Lets jump right into the code. First, we need to create a handler that will be called when a webhook is received. We are going to create a file called webhooks.ts in the pages/api folder.

// pages/api/webhooks.ts
import { buffer } from 'micro';
import { NextApiRequest, NextApiResponse } from 'next';
import Stripe from 'stripe';

// This part is necessary so that NextJS doesn't parse the request body
// Otherwise it will manipulate it and stripe will reject it
export const config = {
  api: {
    bodyParser: false,
  },
};

// the handler
const handleWebhook = async (
  req: NextApiRequest, 
  res: NextApiResponse
  ) => {
  if (req.method === 'POST') {
    try {
      // get the stripe signature
      const sig = req.headers['stripe-signature'];
      const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
        apiVersion: '2022-11-15',
        typescript: true,
      });
      const buf = await buffer(req);
      const stripeEvent = stripe.webhooks.constructEvent(
        buf,
        sig!,
        process.env.STRIPE_ENDPOINT_SECRET!
      );
      // now you have access to the stripe event

      switch (stripeEvent.type) {
        // this is where we are going to add our logic 
        // depending on the event type
        case '':
          break;
        // ...
      }

      // just inform stripe that you received the event
      res.send({ status: 'success' });
      return;
    } catch (error: any) {
      // lets handle any errors coming from stripe
      console.log(error);
      res.status(500).json({ error: error.message });
      return;
    }
  }

  // if the request is not a POST request, we return a 404
  res.status(404).json({
    error: {
      code: 'not_found',
      message:
        "The requested endpoint was not found",
    },
  });
}

export default handleWebhook;

Event specific logic

Lets say you have a subscription for your software and you want to update your database with the subscription ID when the checkout session is completed. You can do something like this:

case 'checkout.session.completed':
  const session = stripeEvent.data.object as Stripe.Checkout.Session;

  const subscription = await stripe.subscriptions.retrieve(
    session.subscription as string
  );

  // update your database with the subscription id or status, ...

  break;

For the events list, you can refer to the stripe documentation.

Environment variables

As you can see, we will need 2 environment variables (locally in your .env.local file):

STRIPE_SECRET_KEY
STRIPE_ENDPOINT_SECRET

You can find them in your stripe dashboard, in the "Developers" tab, then "API keys".

Testing the webhook locally

Now that we have our webhook handler, we need to test it. The problem is that we can't test it locally because stripe needs to be able to send a request to our application. So we need to expose our local application to the internet.

The easiest way is to use stripe cli. You can download it here.

Then, you need to login to your stripe account:

stripe login

Then, you need to start listening to the events and forward the request to our local application.:

stripe listen --load-from-webhooks-api --forward-to localhost:3000

Now we can just use our app locally and debug the events based on our flow.

If you want to trigger a specific event, you can use the trigger command:

stripe trigger payment_intent.succeeded

Just as a general note, you should test in "test mode" first, then when you are ready, you can switch to "live mode".

NextJS api validators

Adrien Fischer — Mon, 17 Apr 2023 07:44:07 +0000

NextJS background

NextJS is a popular React framework for building server-rendered React applications. It provides a feature called "API Routes" that allows you to create serverless functions within your NextJS application to handle API requests.

API Routes in NextJS provide a convenient way to create server-side logic for handling HTTP requests, such as fetching data from a database, processing form submissions, or integrating with third-party APIs. These API Routes are automatically deployed as serverless functions and can be accessed via API endpoints.

To create an API Route in NextJS, you can create a file with the .js or .ts extension in the pages/api directory of your NextJS project. This file represents the API endpoint that you want to create. For example, you can create a file called myApi.ts in the pages/api directory to create an API endpoint with the URL path /api/myApi.

Inside the API Route file, you can define your server-side logic using JavaScript or TypeScript. You can use popular Node.js libraries for handling HTTP requests and responses, such as http, express, or axios. For example, you can define an API Route that handles a POST request and returns a JSON response like this:

// pages/api/myApi.ts

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === 'POST') {
    // Handle POST request logic here
    const { email, address } = req.body;
    // Process the data and send response
    res.status(200).json({ message: 'Data received', email, address });
  } else {
    res.status(400).json({ message: 'Invalid request method' });
  }
}

This is quite easy to setup and great to use.
Except when the application grows and you need to validate the data coming from the client.

For instance, if you want to have the same endpoint and handle the GET and the POST request, you can do something like this:

// pages/api/myApi.ts

export default function handler(req: NextApiRequest, res: NextApiResponse) {
    if (req.method === 'POST') {
        // your logic
        res.status(200).json({ message: 'Post method' });
    } else if (req.method === 'GET') {
        // your get logic
        res.status(200).json({ item: {name: 'my item', price: 0} });
    } else {
        res.status(400).json({ message: 'Invalid request method' });
    }
}

And if you need to validate the data coming from the client, you will need to add some logic to check if the data is valid or not.

That's when next-api-decorators comes in handy.

Main caveat: you handler needs to be a class rather than a function.

What you need to install

npm install next-api-decorators class-validator

So now, you can create a class that will handles our previous requests like so:

// pages/api/myApi.ts

class MyApiRouteHandler {
    @Post()
    @HttpCode(200) // will return a 200 if everything is ok
    createItem() {
        return { message: 'Post method' };
    }

    @Get()
    @HttpCode(200) // will return a 200 if everything is ok
    getItem() {
        return ({ item: {name: 'my item', price: 0} });
    }
}
export default createHandler(MyApiRouteHandler);

Way cleaner and easier to read.

Validation

Now lets add some validation to our request:

// pages/api/myApi.ts

export default class MyApiRouteHandler {
    @Post()
    @HttpCode(201) // will return a 201 if everything is ok
    createItem(
        @Body(ValidationPipe) body: ItemCreationDto,
        @Req() req: NextApiRequest,
        @Res() res: NextApiResponse
    ) {
        const { name, price } = body;
        return { message: 'Post method', name, price };
    }
}

We are using the ValidationPipe from class-validator to validate our request body.

class ItemCreationDto {
    @IsString()
    @IsNotEmpty()
    name: string;

    @IsNumber()
    @IsNotEmpty()
    price: number;
}

Now when you call your endpoint, you will get a 400 error if your body is not valid. So quite easy to use.
Now you can just insert your data in the database for instance without having to write extra code for validation.

Conclusion

In conclusion, NextJS API validator is a valuable tool for building secure and robust APIs in a TypeScript context. By leveraging its features for type checking, data validation, and sanitization, you can create APIs that are more resilient to common security risks, provide better error handling, and deliver a more reliable and secure user experience. Incorporating NextJS API validator in your NextJS TypeScript projects can greatly enhance the overall quality and security of your APIs.

Create a blog with Supabase and Next.js - part 5 - deployment

Adrien Fischer — Wed, 22 Mar 2023 14:36:52 +0000

Create a supabase account

Until now we've been using supabase locally with docker.
Lets create the necessary accounts so we can deploy our blog to the cloud.

Go to supabase and create an account, and then a project. We won't go into details about the project creation, you can find more information in the docs.

We have a couple of different ways of doing it, either by using the sql editor and copy pasting the migration file, or by using github actions.

If you created the database manually from the UI, you can just get the migration by running:
npx supabase db diff -f first-migration

Create a Github repository

Create a new repository or fork my repository if you haven't done everything on your side already.

Github actions

Lets go back to the database. What we want to do is deploy the database to supabase when we push to the main branch. We can do that by using github actions.

## .github/workflows/deploy-migrations.yml
name: Deploy Migrations to Supabase

## targets the main branch - when we push to main, the workflow will run
on:
  push:
    branches:
      - main
  workflow_dispatch:

jobs:
  deploy:
    runs-on: ubuntu-latest

    env:
      SUPABASE_ACCESS_TOKEN: ${{ secrets.SUPABASE_ACCESS_TOKEN }}
      SUPABASE_DB_PASSWORD: ${{ secrets.SUPABASE_DB_PASSWORD }}
      SUPABASE_PROJECT_ID: ${{ vars.SUPABASE_PROJECT_ID }}

    steps:
      - uses: actions/checkout@v3

      - uses: supabase/setup-cli@v1
        with:
          version: latest

      - run: |
          supabase link --project-ref $SUPABASE_PROJECT_ID
          supabase db push

We need to create a folder called .github/workflows and create a file called deploy-migrations.yml with the content above.

In github (Settings > Secrets and variables > Actions), we also need to create the following secrets:

SUPABASE_ACCESS_TOKEN
SUPABASE_DB_PASSWORD

And the following variable:

SUPABASE_PROJECT_ID

You can find the values in the supabase dashboard.

Deploying the blog

First we need to create a vercel account and link it to our github account. Once that's done, just create a new project.

Once again setup the supabase environment variables in the vercel dashboard. Those values are for Next.js this time.

And that's it, we're done. You can now go to your project and commit/push to the main branch to deploy the database and the blog.

Create a blog with Supabase and Next.js - part 4 - SSR

Adrien Fischer — Tue, 21 Mar 2023 07:56:06 +0000

If you want to jump straight to the source code, here's the link to the github repository.

One thing we haven't done yet is server side rendering. We are currently fetching the posts using the useEffect hook. This means that the posts won't be available until the component is mounted. We can do better by using the getStaticProps function from nextjs to fetch the posts on the server.

Lets use the /posts/[id] page to do just that.

export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
  const supabase = createServerSupabaseClient(ctx); // from '@supabase/auth-helpers-nextjs';
  const { data } = await supabase
    .from('posts')
    .select('*')
    .eq('id', ctx.params?.id)
    .single();

  if (!data) {
    // if the post doesn't exist, return 404
    return {
      notFound: true,
    };
  }

  // return the post a prop
  return {
    props: {
      post: data,
    },
  };
};

By using getServerSideProps, we can now fetch the post on the server and pass it to the component as a prop. Our PostPage component already have the post prop so we can just use it (see part 2).

Github actions: Deploy a Hugo website to a FTP server

Adrien Fischer — Mon, 20 Mar 2023 13:46:40 +0000

Introduction

Nowadays, it never has been easier to build and host a website for having any form of online presence. You don't even need a lot of web development knowledge. There are many tools and resources available that make the process easier than ever. One such tool is Hugo, a fast and flexible static site generator that allows users to create websites quickly and easily. In addition, deploying a Hugo site to a web server can be made even simpler through the use of Github Actions (assuming your code is hosted on github), a powerful automation tool that can be used to automatically deploy a website to a FTP server. In this article, we'll explore how to use Hugo to build a website and then deploy it to a FTP server using Github Actions, providing a step-by-step guide for those looking to get their website up and running quickly and efficiently.

Github actions

Github actions is a great tool to automate your workflow. It is free for repositories (with some limitations on private repositories) and you can use it to build, test and deploy your code.

Setting up the environment variables

You need to set up some environment variables in your repository. You can do this by going to Settings > Secrets & Variables > Actions in your Github repository (under Security).

You need to set up the following variables:

Creating the workflow

Now that we have the environment variables set up, we can create the workflow. You can create a file called main.yml in the .github/workflows folder in your repository.

The workflow consists of two jobs: "build" and "deploy". The "build" job builds the hugo site and the "deploy" job deploys the site to the FTP server.

name: 🚀 Deploy to prod

# Will trigger the workflow on each push to the main branch
on:
  push:
    branches:
      - main

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

jobs:
  # The first job will build the hugo site and upload the artifact
  build:
    name: 🔧 Build Hugo site
    runs-on: ubuntu-latest
    env:
      HUGO_VERSION: 0.111.2
    steps:
      - name: Install Hugo CLI
        run: |
          wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb \
          && sudo dpkg -i ${{ runner.temp }}/hugo.deb

      - name: Install Dart Sass Embedded
        run: sudo snap install dart-sass-embedded

      - name: Checkout
        uses: actions/checkout@v3
        with:
          submodules: recursive
          fetch-depth: 0

      - name: Install Node.js dependencies
        run: '[[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci || true'

      - name: Build with Hugo
        env:
          # For maximum backward compatibility with Hugo modules
          HUGO_ENVIRONMENT: production
          HUGO_ENV: production
        run: |
          hugo \
            --gc \
            --minify

      # We save the result as an artificat so we can use it in the next job
      - name: Upload artifact
        uses: actions/upload-artifact@v3
        with:
          name: release-artifact
          path: './public'

  # The second job will deploy the site to the FTP server using the artifact from the first job
  deploy:
    name: 🎉 Deploy
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Checkout
        uses: actions/checkout@v3

      # Download the artifact we just created
      - name: Download artifact
        uses: actions/download-artifact@v3
        with:
          name: release-artifact
          path: './public' # This is the path where the artifact will be downloaded to

      - name: Deploy file
        uses: wlixcc/SFTP-Deploy-Action@v1.2.4
        with:
          server: ${{ vars.ftp_server }}
          username: ${{ vars.ftp_username }}
          ssh_private_key: ${{ secrets.ftp_password }}
          # or if you only use a password
          # sftp_only: true
          # password: ${{ secrets.ftp_password }}
          port: ${{ vars.ftp_port }}
          remote_path: '/var/www/app' # This will depend on your server
          local_path: './public/*' # This is the path where the artifact is located

Now you only need to commit and push your changes to the main branch and the workflow will be triggered.

Sources:

Other alternatives

You can deploy your hugo site to a lot of other services like Netlify, Vercel, Render, etc. You can find a list of all the services here.

Create a blog with Supabase and Next.js - part 3 - fetching data

Adrien Fischer — Mon, 20 Mar 2023 07:21:09 +0000

If you want to jump straight to the source code, here's the link to the github repository.

The `useSignIn` hook

We are going to create a hook to handle the signin process. We will use the useAuth hook from @supabase/auth-helpers-nextjs to handle the authentication. It returns an object with two methods: signInWithEmail and signOut.

import { useSupabaseClient } from '@supabase/auth-helpers-react';

const useSignIn = () => {
  const supabase = useSupabaseClient();

  const signInWithEmail = async (email: string) => {
    const { error } = await supabase.auth.signInWithOtp({
      email: email,
    });
    if (error) throw error;
  };

  const signOut = async () => {
    const { error } = await supabase.auth.signOut();
    if (error) throw error;
  };

  return { signInWithEmail, signOut };
};

export default useSignIn;

Here's a breakdown of the hook's functionality:

`signInWithEmail` method

The signInWithEmail method is an asynchronous function that takes an email address as an argument. It uses the Supabase client obtained from the useSupabaseClient hook to call the signInWithOtp method and attempt to sign the user in with a magic link.

The user will only need to check his/her email and click on the link to sign in.

`signOut` method

The signOut method is an asynchronous function that calls the signOut method of the Supabase client obtained from the useSupabaseClient hook to sign the user out of their account. If the sign-out attempt fails, the function throws the error.

The `usePosts` hook

import { useState } from 'react';
import { Database } from '@/types/database.types';
import { useSupabaseClient, useUser } from '@supabase/auth-helpers-react';
import { Post } from '@/types/Post';

const useGetPosts = () => {
  // Retrieve Supabase client and user from context
  const supabase = useSupabaseClient<Database>();
  const user = useUser();

  // Initialize posts state
  const [posts, setPosts] = useState<Post[]>([]);

  // Retrieve posts from the database
  const getPosts = async (limit?: number) => {
    const { data, error } = await supabase
      .from('posts')
      .select('*')
      .limit(limit || 50);
    if (error) throw error;
    setPosts(data || []);
  };

  // Create a new post in the database
  const createPost = async (title: string, body: string) => {
    if (!user) throw new Error('User not found');
    const { data, error } = await supabase
      .from('posts')
      .insert({
        title,
        body,
        author: user.id,
      })
      .select()
      .single();
    if (error) throw error;
    return data;
  };

  // Update an existing post in the database
  const updatePost = async (id: string, title: string, body: string) => {
    const { data, error } = await supabase
      .from('posts')
      .update({
        title,
        body,
      })
      .match({ id })
      .select()
      .single();
    if (error) throw error;
    return data;
  };

  return {
    getPosts,
    updatePost,
    createPost,
    posts,
  };
};

export default useGetPosts;

This custom hook provides functionality for retrieving and manipulating posts from a Supabase database.

Nothing too fancy about it, it's just a wrapper around the Supabase client. In terms of security, the RLS are already taking care of everything so we don't need to worry about that.

Lets integrate the hooks in the app

First lets do the signin page.

// --- src/components/SignupModal.tsx ---
const { signInWithEmail } = useSignIn();

const handleSubmit = async (evt: FormEvent<HTMLFormElement>) => {
  evt.preventDefault();
  try {
    await signInWithEmail(email);
  } catch (error: any) {
    console.log(error.message);
  }
};

Previously the posts array was just an empty array we were saving in the state. Now we are going to fetch the posts from the database. The useGetPosts hook provides a getPosts method that we can use to fetch the posts and a posts state that we can use to display the posts. So no changes to the UI.

// --- src/components/PostList
const { getPosts, posts } = useGetPosts();
useEffect(() => {
  getPosts();
}, []); // only on mount

Creating a post is pretty straightforward.

// --- src/pages/new.tsx ---
const router = useRouter();
const { createPost } = usePosts();

const handleSubmit = async (title: string, body: string) => {
  try {
    const { id } = await createPost(title, body);
    router.push(`/posts/${id}`);
  } catch (error: any) {
    console.log(error.message);
  }
};

We call the hook that will create a new post in the database and redirect the user to the newly created post if it succeeds.

And finally lets update the detail page the same way.

// --- src/pages/posts/[id].tsx ---
const router = useRouter();
const { updatePost } = usePosts();

const handleSubmit = async (title: string, body: string) => {
  try {
    await updatePost(post.id, title, body);
    router.reload();
  } catch (error: any) {
    console.log(error.message);
  }
};

The last step is to fetch the post and display them in the post page (/posts/[id]), based on the id in the url. To do that, we are going to do it differently and use the getServerSideProps function from Next.js.

Create a blog with Supabase and Next.js - part 2 - the UI

Adrien Fischer — Sun, 19 Mar 2023 07:15:31 +0000

If you want to jump straight to the source code, here's the link to the github repository.

The home page

Based on what we've done in the previous part, we are now going to create a component to display the posts called PostList.

// --- src/components/PostList.tsx ---
const PostList = () => {
  const [posts, setPosts] = useState<Post[]>([]);
  return (
    <Container>
      <Stack direction="horizontal" gap={3}>
        <h1>Latest posts</h1>
        <Link href={`/posts/new`} legacyBehavior>
          <Button>+ new post</Button>
        </Link>
      </Stack>
      <Row xs={1} md={2}>
        {posts.map((post) => (
          <Col key={post.id}>
            <PostCard post={post} />
          </Col>
        ))}
      </Row>
    </Container>
  );
};
export default PostList;

Nothing complicated, we just display the posts in a grid. We also have a button to create a new post.

Because we are using bootstrap, we need to use the legacyBehavior prop on the Link component to make it work. Now by default next/link creates a a tag with a href attribute. This is not compatible with bootstrap as bootstrap already creates a a tag with the Button component.

More info in the doc here.

Quick note about the types: we are using the Post type from the types/Post.ts file which uses the types from the database.
You can generate them by running: npm run dev:gen-types

Now we need a nav bar to display the login button and the title of the blog.

// --- src/components/Header.tsx ---
const Header = () => {
  const user = useUser(); // hook from '@supabase/auth-helpers-react';
  const [showModal, setShowModal] = useState(false);
  const handleLogout = () => {
    // logout logic will go here
  };
  return (
    <>
      <SignupModal show={showModal} handleClose={() => setShowModal(false)} />
      <Navbar bg="light">
        <Container>
          <Navbar.Brand href="#home">My Supabase blog</Navbar.Brand>
          <Navbar.Toggle />
          <Navbar.Collapse className="justify-content-end">
            {user ? (
              <Button variant="link" onClick={handleLogout}>
                Logout
              </Button>
            ) : (
              <Button onClick={() => setShowModal(true)}>Login</Button>
            )}
          </Navbar.Collapse>
        </Container>
      </Navbar>
    </>
  );
};
export default Header;

Those components will be used in the index.tsx file.

// --- src/pages/index.tsx ---
const Home = () => {
  return (
    <>
      {/* see previous step */}
      <main>
        <Header />
        <PostList />
      </main>
    </>
  );
};

The login modal 🔒

We are going to use the Modal component from bootstrap to display the login form so we don't need to create a separate page.

// --- src/components/SignupModal.tsx ---
const SignupModal = ({ show = false, handleClose }: Props) => {
  const [email, setEmail] = useState('');

  const handleSubmit = async (evt: FormEvent<HTMLFormElement>) => {
    evt.preventDefault();
    // login logic will go here
  };

  return (
    <Modal show={show} onHide={handleClose}>
      <Card body>
        <Form id="login" onSubmit={handleSubmit}>
          <Form.Group className="mb-3" controlId="formLoginEmail">
            <Form.Label>Email address</Form.Label>
            <Form.Control
              type="email"
              value={email}
              onChange={({ target }) => setEmail(target.value)}
            />
          </Form.Group>
          <Button type="submit" disabled={loading}>
            Login
          </Button>
        </Form>
      </Card>
    </Modal>
  );
};

export default SignupModal;

Post creation page

For this new page (/posts/new), we are going to keep the logic simple and in the page, the form will be a separated component called PostEditForm.

// --- src/pages/posts/new.tsx ---
const NewPostPage = () => {
  const handleSubmit = async (title: string, body: string) => {
    // create post logic will go here
  };

  return (
    <>
      <main>
        <Header />
        <Container>
          <Link href="/" legacyBehavior>
            <Button variant="link">{'<'}Back to all posts</Button>
          </Link>
          <h1>New Post</h1>
          <PostEditForm saveForm={handleSubmit} />
        </Container>
      </main>
    </>
  );
};

export default NewPostPage;

The PostEditForm component is pretty simple, it just displays a form with one input and a submit button.

// --- src/components/PostEditForm.tsx ---
const PostEditForm = ({ saveForm, post }: Props) => {
  const [title, setTitle] = useState('');
  const [body, setBody] = useState('');

  // if we are editing a post, we need to set the initial values on mount
  useEffect(() => {
    if (post) {
      setTitle(post.title);
      setBody(post.body);
    }
  }, [post]);

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    await saveForm(title, body);
  };

  return (
    <Form onSubmit={handleSubmit}>
      <Form.Group className="mb-3">
        <Form.Label>Title:</Form.Label>
        <Form.Control
          value={title}
          onChange={({ target }) => setTitle(target.value)}
        />
      </Form.Group>
      <Form.Group className="mb-3">
        <Form.Label>Content:</Form.Label>
        <Form.Control
          as="textarea"
          rows={3}
          value={body}
          onChange={({ target }) => setBody(target.value)}
        />
      </Form.Group>
      <Button type="submit">Save</Button>
    </Form>
  );
};

export default PostEditForm;

The post page and the edit page 📝

The post page will display the post and a button to edit it. The edit component will be the same as the new post component but with the initial values set.

// --- src/pages/posts/[id].tsx ---
const PostPage = ({ post }: Props) => {
  const [isEditing, setIsEditing] = useState(false);

  const handleSubmit = async (title: string, body: string) => {
    // update post logic will go here
  };

  return (
    <main>
      <Header />
      <Container>
        <Link href="/" legacyBehavior>
          <Button variant="link">{'<'}Back to all posts</Button>
        </Link>
        {isEditing ? (
          <PostEditForm post={post} saveForm={handleSubmit} />
        ) : (
          <>
            <h1>{post.title}</h1>
            <div>{post.body}</div>
            {user && user.id === post.author && (
              <Button onClick={() => setIsEditing(true)}>Edit post</Button>
            )}
          </>
        )}
      </Container>
    </main>
  );
};

The UI is now done, in the next part we will create the hooks to fetch the data from the database.

Create a blog with Supabase and Next.js

Adrien Fischer — Sat, 18 Mar 2023 11:35:41 +0000

If you want to jump straight to the source code, here's the link to the github repository.

Introduction

In this tutorial, we will build a simple blogging application using Next.js and Supabase. Next.js is a popular React framework for building server-side rendered and statically generated web applications, while Supabase is an open source Firebase alternative that provides a PostgreSQL database and authentication APIs out of the box. By combining these technologies, we can easily create a performant and scalable blogging platform.

Throughout this tutorial, we will cover the following topics:

Setting up a Next.js project and integrating Supabase for authentication.
Creating a PostgreSQL database schema for our blog application using Supabase.
Implementing server-side rendering and client-side routing with Next.js.
Building a user interface for creating, editing, and deleting blog posts using React components.
Deploying our application to the cloud using Vercel.

By the end of this tutorial, you will have a fully functional blog application that can be customized and expanded to suit your needs. So let's get started!

Setup our project

Create a new project with next.js and typescript:

npx create-next-app@latest --typescript

Install supabase and bootstrap:

npm install supabase --save-dev
npm install @supabase/supabase-js
npm install @supabase/auth-helpers-nextjs @supabase/auth-helpers-react
npm install react-bootstrap bootstrap

Now we can initialize supabase:

npx supabase init

Which will create the supabase folder with the config, and finally, start all the services:

npx supabase start

Now for the Next.js part, we need to create a .env.local file in the project root and add the following environment variables (see the screenshot below for the values):

NEXT_PUBLIC_SUPABASE_URL=<your-supabase-api-url>
NEXT_PUBLIC_SUPABASE_KEY=<your-supabase-api-key>

Lets start the dev server:

npm run dev

We are good to go!

The database

We only need a posts table with the following columns:

create table "public"."posts" (
  "id" uuid not null,
  "title" text not null,
  "body" text not null,
  "created_at" timestamp with time zone default now(),
  "author" uuid not null
);

CREATE UNIQUE INDEX posts_pkey ON public.posts USING btree (id);

alter table "public"."posts" add constraint "posts_pkey" PRIMARY KEY using index "posts_pkey";
alter table "public"."posts" add constraint "posts_author_fkey" FOREIGN KEY (author) REFERENCES auth.users(id) not valid;
alter table "public"."posts" validate constraint "posts_author_fkey";

You can either create the table manually, or use the supabase dashboard.

Quick note on the author column: we are using directly the uuid from the auth.users table.
Usually as a good practice I would create a profiles table with the id as the primary key and additionnal infos (like the name, the avatar, etc...).
But for this tutorial I will keep it simple.

Lets turn on RLS (Row Level Security) for the posts table, and authorise everyone to read the table, any logged in user to create posts, and finally only the owner can update:

alter table "public"."posts" enable row level security;

create policy "everyone can see posts"
on "public"."posts"
as permissive
for select
to public
using (true);

create policy "only logged in users can create posts"
on "public"."posts"
as permissive
for insert
to authenticated
with check (true);

create policy "only the user can edit"
on "public"."posts"
as permissive
for update
to public
using ((auth.uid() = author))
with check ((auth.uid() = author));

You can see (and actually create/edit) those policies in the supabase dashboard:

Note: no delete for now - so I've kept it out of the policies - but it would be the same, only owners can delete.

NextJs setup

Lets get rid of the default page in the pages folder and replace the index.tsx with the following:

import Head from 'next/head';
const Home = () => {
  return (
    <>
      <Head>
        <title>Posts list</title>
        <meta name="description" content="Blog made with NextJs and Supabase" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>{/* Our components will go here */}</main>
    </>
  );
};
export default Home;

As a reminder, the pages folder is a special directory in a Next.js project that contains the pages of your application. When you create a new file in this folder, Next.js automatically generates a route for it based on the file name. For example, the index.js in the pages folder, it will be mapped to the root URL of your application.

For our application, we will have the following pages:

/: the home page, which will list all the posts
/posts/[id]: the post detail page
/posts/new: the new post page

In terms of structure, our src folder will look like the following:

So to recap, we will have:

components: our React components
hooks: our custom hooks for getting/setting data from supabase
pages: our Next.js pages
styles: for some custom styling
types: for our database types

Everything is now ready, lets jump on the UI!

Supabase edge functions - a quick start

Adrien Fischer — Mon, 27 Feb 2023 17:20:02 +0000

Supabase edge functions are quite powerful, but you need to setup a lot of things to get started. So here is a quick start guide to get you started.

Disclaimer: this is how I use them in real projects, with my prefered stack, and this post is a way for me to remember how to setup everything.

Usually, I use Next.js, and I want to use the same stack for my edge functions. So I will use the following stack:

npx create-next-app@latest --typescript

npx install supabase --save-dev
npm install @supabase/supabase-js --save

First lets init the supabase project, and start the local server:

npx supabase init
npx supabase start

Now to create an edge functions:

npx supabase functions new my-function

To test it, your need to run the Functions watcher

npx supabase functions serve

So for our test, the edge function will be called by an endpoint. So we need to create a new endpoint in /pages/api/

// pages/api/simple-edge-function.ts
import { createClient } from '@supabase/supabase-js';
import { NextApiRequest, NextApiResponse } from 'next';

const simpleEdgeFunction = async (
  req: NextApiRequest,
  res: NextApiResponse
) => {
  const supabase = createClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL || '',
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY || ''
  );

  // 'my-function' is the name of the function you created from the cli above
  const { data, error } = await supabase.functions.invoke('my-function', {
    body: { name: 'Functions' },
  });

  console.log(data);

  res.status(200).json({ data, error });
};

export default simpleEdgeFunction;

Now go to supabase/functions/my-function/index.ts, and simply return a string:

// this is the example from the supabase documentation
import { serve } from 'https://deno.land/std@0.168.0/http/server.ts';

console.log('Hello from Functions!');

serve(async (req: Request) => {
  const { name } = await req.json();
  const data = {
    message: `Hello ${name}!`,
  };

  return new Response(JSON.stringify(data), {
    headers: { 'Content-Type': 'application/json' },
  });
});

Now if you call the endpoint:

curl http://localhost:3000/api/simple-edge-function

it will return:

{
  "data": {
    "message": "Hello Functions!"
  },
  "error": null
}

And print in the functions watcher console:

Hello from Functions!

and in the supabase console:

{ message: 'Hello Functions!' }

If you need to use an env file, you need to run the watcher with the --env-file parameter:

npx supabase functions serve --env-file .env.local

Let's build a weather app with vite and react - part 3

Adrien Fischer — Wed, 21 Sep 2022 07:42:19 +0000

Now that we have our mapbox integration, we want to open a new page when we click on the city.

Routing

npm install --save react-router-dom

Let's update our main function App in order to create a new route and have two pages:

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path='/' element={<MainPage />} />
        <Route path='/city' element={<CityPage />} />
      </Routes>
    </BrowserRouter>
  );
}

We are now going to slightly change our list in order to open the new page when you click on the link.

In order to do that, we are going to remove the onClick we added in step 1, and use the Link component from react-router.

const CityList = (props: CityListProps) => {
  return (
    <ListGroup>
      {props.cities.map((city) => (
        <ListGroup.Item key={city.name} action>
          <Link to={`/city?lat=${city.lat}&lng=${city.lng}`}>{city.name}</Link>
        </ListGroup.Item>
      ))}
    </ListGroup>
  );
};

We are going to only use the latitude and longitude in order to identify the cities. So we only need to pass them as url parameters for our new page.

The reason for that is that we are going to use weatherbit.io API and using lat/lng is the recommanded way (and I believe most of the weather API are doing the same).

Weatherbit API

First thing first, you're going to need to create an account on weatherbit in order to get an API key. It's free, takes 2 minutes and doesn't require a credit card or anything.

Now that it's done, we are going to only use one endpoint: Current Weather API.

It's quite straightforward:

const url = 'https://api.weatherbit.io/v2.0/current?lat=35.7796&lon=-78.6382&key=API_KEY'
const result = await axios.get(url);

Back to our app, we need to get the latitude and longitude from the url, so let's use react-router:

import { useLocation } from 'react-router-dom';
// [...]

const location = useLocation();
// location.search will be similar to: ?lat=51.507322&lng=-0.127647
const [latqs, lngqs] = location.search.substring(1).split('&');
const lat = latqs.split('=')[1];
const lng = lngqs.split('=')[1];

You can move that into a separate method (utils) for clarity (I've called it getSearchLatLong).

Calling the endpoint

We are going to need to call the endpoint once the component is first mounted and save it in the state.
Let's use useEffect and useState for that:

const CityPage = () => {
  const location = useLocation();
  const [weatherData, setWeatherData] = useState<WeatherData>();

  useEffect(() => {
    const getWeather = async () => {
      const {lat, lng} = getSearchLatLong(location.search)

      const url = `https://api.weatherbit.io/v2.0/current?key=${API_KEY}&lat=${lat}&lon=${lng}`;
      const result = await axios.get(url);

      setWeatherData(result.data.data[0]);
    };
    if (!weatherData) getWeather();
  }, []);

  // ...
}

The API will return data like:

{
    "data": [
        {
            "wind_cdir": "WSW",
            "rh": 58,
            "pod": "d",
            "lon": -0.1276,
            "pres": 1017.9,
            "timezone": "Europe/London",
            // [...]
        }
    ],
    "count": 1
}

We are only going to save the first observation (we should only receive one anyway).

Displaying the weather

Let's just display the info we received in a simple way:

return (
  <Container>
    <NavBar />
    <ViewContainer>
      {weatherData ? (
        <>
          <h1>
            {weatherData.city_name}{' '}
            <img
              src={`https://www.weatherbit.io/static/img/icons/${weatherData.weather.icon}.png`}
            />
          </h1>
          <ul>
            <li>
              <Thermometer /> {weatherData.temp}° (feels like{' '}
              {weatherData.app_temp}°)
            </li>
            <li>
              <Wind /> {weatherData.wind_spd}m/s {weatherData.wind_cdir}
            </li>
          </ul>
        </>
      ) : (<div>Loading...</div>)}
    </ViewContainer>
  </Container>
)

A couple of things to note:

The Thermometer and Wind components are both images from react-bootstrap-icons, so if you want to use it, just install the lib and import the component you want.

Weatherbit does return an icon for the current weather, so we simply are going to use their image. More info can be found here.

In the next tutorial, we will save the cities in the local storage in order to quickly access the ones we've looked at already.

Let's build a weather app with vite and react - part 2

Adrien Fischer — Mon, 19 Sep 2022 08:24:15 +0000

Mapbox

We are now going to see how we could search for cities calling the mapbox API.
In order to use the API, you'll need to create an account (it's free, even if they might ask for a credit card in order to confirm your identity).

Now that you have your account created, get the Default public token from the account page.

In order to call the API, we are going to use axios.

npm install --save axios

Saving the user input

Now that we have all the libs we need, we are going to start "saving" what the user is typing in the component state.

// src/pages/MainPage.tsx
const MainPage = () => {
  const [searchText, setSearchText] = useState('')
  // ...
  return (
    { /* ...*/ }
    <Form.Control
      placeholder='Search city'
      onChange={(evt) => setSearchText(evt.target.value)}
    />
    { /* ...*/ }
  )
}

Calling the API

We are going to create a function called callApi this will only call the mapbox endpoint with the value we just saved in the state.

Here's the documentation for the endpoint we are going to use.

We simply need to call the GET https://api.mapbox.com/geocoding/v5/{endpoint}/{search_text}.json?access_token={access_token}&types={types} endpoint where:

endpoint will be mapbox.places in our case
search_text will be the value we saved in our local state
access_token the token you got from your account page
types will be place because we want to see the cities (see here for more info)

const callApi = async () => {
  try {
    const access_token = '[your token]'
    const result = await axios.get(`
      https://api.mapbox.com/geocoding/v5/mapbox.places/${searchText}.json?access_token=${access_token}&types=place
    `)
  } catch (error) {
    // if you need to handle any error returned by mapbox
    console.log(error)
  }
}

Once we do get the results, we want to save the cities into a new variable in the component state.

Also we do not need to save everything, so for now we are going to save a name and the GPS location.

const [cities, setCities] = useState([])
// ...
const callApi = async () => {
  // ...
  setCities(
    result.data.features.map((city: any) => ({
      name: city.place_name,
      lat: city.geometry.coordinates[1],
      lng: city.geometry.coordinates[0],
    }))
  )
  // ...
}

And obviously if we want to display the values from Mapbox rather than the hardcoded list, we need to delete the cities const we created in Part 1.

What we want now is, every time we get a new key stroke, we want to call mapbox and request the list of cities.

For that let's use useEffect and call our callApi function every time the searchText changes.

useEffect(() => {
  callApi()
},[searchText])

So this is working as expected, every time we type a letter, it will call the mapbox api and returns the list of cities.

Optimisation

This is not very optimised, most of the calls won't really be needed. When you type a city's name, you might want to type x letters before it actually does the search, and by doing that not use the entire quote of requests.

In order to fix that, we are going to create a debounce hook, that will call our function only after x milliseconds.

We are going to create a basic one, if you want to cover all scenarios, you might want to use a fancy one from a third party library.

// src/hooks/useDebounce.ts
import { useRef } from 'react'
const useDebounce = () => {
  let timer = useRef(0)
  const debounce = (
    callback: () => void, // the method you want to call
    delay: number // the time in ms
  ) => {
    clearTimeout(timer.current)
    timer.current = setTimeout(() => {
      callback()
    }, delay)
  }
  return { debounce }
}
export default useDebounce

If you've never used useRef:

useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). The returned object will persist for the full lifetime of the component.

In our case we don't want the timer var to be recreated every re render, otherwise it will defeat the purpose of this timer.

So for every key stroke, the method will be called, and the timer will be reset until the timer ends. Once the delay is reached, the callback will be called.

Lets see how we use it in our main component:

// src/pages/MainPage.tsx
const MainPage = () => {
  // ...
  const { debounce } = useDebounce()

  useEffect(() => {
    debounce(callApi, 500)
  }, [searchText])
}

So now when you type, the endpoint will only be called if you stop typing for 500ms.

Let's build a weather app with vite and react - part 1

Adrien Fischer — Mon, 19 Sep 2022 08:18:32 +0000

Setup the project

We are going to use vite, with react and everything will be TypeScript.

The plan for this group of tutorials it to learn how to use vite, quickly build a UI with React and Bootstrap, and then add more features on top of it.

Vitejs

For this first part, let's start by creating the project:

Most of the boilerplate is unnecessary, so we are going to remove the css files and use styled-components instead.

Our folder structure will look like this:

Additional libraries

Let's install what we need.

npm run install styled-components --save
npm run install @types/styled-components --save-dev

And while we are at it, let's install react-bootstrap:

npm install react-bootstrap bootstrap --save
npm install react-bootstrap-icons --save

Now that we have everything ready, we can start creating the main page, which will contain a search bar and a list of components (cities).
Each city will be clickable.

Let's build the main page

We only need a search bar, and a list of cities. The CityList component will be separate for clarity, and will have a cities property containing the results of our search.

For now we will hardcode it to:

const cities = [
  { name: 'London', lat: '51.507351', lng: '-0.127758' },
  { name: 'New York', lat: '40.730610', lng: '-73.935242' },
  { name: 'Tokyo', lat: '35.689487', lng: '139.691706' },
  { name: 'Paris', lat: '48.856614', lng: '2.352222' },
];

So the main page will look like:

// src/pages/MainPage.tsx
const MainPage = () => {
  return (
    <ViewContainer>
      <InputGroup className='mb-3'>
        <Form.Control
          placeholder='Search city'
          aria-label='Search city'
          aria-describedby='city'
        />
        <Button variant='outline-primary' id='city'>
          Search
        </Button>
      </InputGroup>
      <CityList cities={cities} />
    </ViewContainer>
  );
};

export default MainPage;

For our CityList component, we will only loop over the cities property and display the name of each city in a ListGroup component.

// src/components/CityList.tsx
const CityList = (props: CityListProps) => {
  const onCityClick = (city: City) => {
    console.log(city);
  };

  return (
    <ListGroup>
      {props.cities.map((city) => (
        <ListGroup.Item
          key={city.name}
          action
          onClick={() => onCityClick(city)}
        >
          <h4>{city.name}</h4>
        </ListGroup.Item>
      ))}
    </ListGroup>
  );
};

export default CityList;

As we are using typescript, we need to type our variables properly, so here are the types used in this component:

type City = { name: string; lat: string; lng: string };
type CityListProps = { cities: Array<City>; };

Our first part is now done, we do have a project ready with hardcoded data.

In our second part we will see how to search for cities using MapBox.

Forem: Adrien Fischer

Stripe webhooks with NextJS

Before we start

Setup webhook in Stripe

Create a webhook handler

Event specific logic

Environment variables

Testing the webhook locally

NextJS api validators

NextJS background

What you need to install

Validation

Conclusion

Create a blog with Supabase and Next.js - part 5 - deployment

Create a supabase account

Create a Github repository

Github actions

Deploying the blog

Create a blog with Supabase and Next.js - part 4 - SSR

Github actions: Deploy a Hugo website to a FTP server

Introduction

Github actions

Setting up the environment variables

Creating the workflow

Other alternatives

Create a blog with Supabase and Next.js - part 3 - fetching data

The useSignIn hook

signInWithEmail method

signOut method

The usePosts hook

Lets integrate the hooks in the app

Create a blog with Supabase and Next.js - part 2 - the UI

The home page

The login modal 🔒

Post creation page

The post page and the edit page 📝

Create a blog with Supabase and Next.js

Introduction

Setup our project

The database

NextJs setup

Supabase edge functions - a quick start

Let's build a weather app with vite and react - part 3

Routing

Weatherbit API

Calling the endpoint

Displaying the weather

Let's build a weather app with vite and react - part 2

Mapbox

Saving the user input

Calling the API

Optimisation

Let's build a weather app with vite and react - part 1

Setup the project

Vitejs

Additional libraries

Let's build the main page

The `useSignIn` hook

`signInWithEmail` method

`signOut` method

The `usePosts` hook