thumbnail_profile-pic.jpeg

xsmall_profile-pic.jpeg

We have released a small [Deno](https://deno.com/) library to allow you to [verify Paddle webhooks](https://developer.paddle.com/webhooks/signature-verification) in your [Supabase Edge Functions](https://supabase.com/docs/guides/functions). This works with the new [Paddle](https://paddle.com) billing platform.

Head on over to [Github to use the library](https://github.com/boardshape/deno_paddle_verify).

Please follow us on [Twitter](https://twitter.com/boardshape), reach out to us if you want to know more, and, if you have a small business or organization and want to run better board meetings, [try BoardShape](https://boardshape.com/dashboard#signup) 🤟

large_creative-art-for-kids-plasticine-dinosaur-2022-11-16-20-14-15-utc.jpg

medium_creative-art-for-kids-plasticine-dinosaur-2022-11-16-20-14-15-utc.jpg

small_creative-art-for-kids-plasticine-dinosaur-2022-11-16-20-14-15-utc.jpg

thumbnail_creative-art-for-kids-plasticine-dinosaur-2022-11-16-20-14-15-utc.jpg

xsmall_creative-art-for-kids-plasticine-dinosaur-2022-11-16-20-14-15-utc.jpg

A small Deno library you can use to verify Paddle webhooks in your Supabase functions.

Deno library for verifying Paddle Webhooks

If you're in the development community you will have seen [@dhh talking about dropping TypeScript from Turbo 8](https://world.hey.com/dhh/turbo-8-is-dropping-typescript-70165c01).

![DHH moves Turbo 8 to JavaScript](https://pedeywbqjyubfaejkuek.supabase.co/storage/v1/object/public/site-content/dhh-turbo-8.png-864dfdad10c0b5fb4418839955f957c1.png)

Now, I'm by no way a DHH fan boy, however, it got me thinking about our own project BoardShape. When I reflected on the work we had done, and particulary thinking about our pair-coding (which is something we do often), so much of our time is spent wrangling TypeScript. I don't want to spend too long writing about the good points and bad points of TypeScript, I was just interested to see how quickly I could take our project from entirely TypeScript to entirely JavaScript. 

## Let the fun begin

### Step 1 - Branch:

I branched main (duh!).

```bash
git checkout -b ts-js
```

## Step 2 - Remove packages:

I looked through package.json and removed a bunch of packages.

```
npm remove typescript
npm remove @types/node
npm remove @types/react
```

... etc. You'll need to work out which packaged you don't need.

### Step 3 - Remove tsconfig and check paths:

You might have some paths for libraries in your tsconfig, so copy those out.

Delete **tsconfig.json** from the project. Don't need that anymore.

Create **jsconfig.json** and add your paths, e.g:

```json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@src/*": ["src/*"],
      "@components/*": ["components/*"],
      "@lib/*": ["src/lib/*"],
      "@utils/*": ["src/utils/*"],
      "@hooks/*": ["src/hooks/*"],
      "@seeds/*": ["seeds/*"]
    }
  }
}
```

### Step 4 - The fun part, converting TypeScript to JavaScript

So, this is the bit that bothered me. We've got about 300 odd .ts and .tsx files in our project. I did not want to manually convert everthing. Obviously, TS just gets transpiled to JS but the transpiled JS is not really easy to read and the formatting is not what we want. I certainly don't want to maintain 300 JS files that are in transpiled format.

A quick google search will lead you to a great project [transform.tools](https://transform.tools/typescript-to-javascript) - it's open source, and you can grab it at https://github.com/ritz078/transform - using the public version it seemed to do a good job of stripping out my TypeScript. I was pretty amazed there isn't just an easy CLI to do this, and it seems like Babel is what transform uses if you [look at the API](https://github.com/ritz078/transform/blob/master/pages/api/typescript-to-javascript.ts) but I couldn't get this to work on the command line easily.

So, after failing to find a better solution, I downloaded the **transform.tools** source code and set it up locally, it ran under localhost just great. I did this because I didn't really want to hit their server with all my source code for a few reasons!

Then, I wrote a simple script to iterate over ts and tsx files. Please excuse how crude this is, I literally through it together and every time I made a mistake I just reverted my branch until I got it right.

![Please excuse the crudity of this model](https://pedeywbqjyubfaejkuek.supabase.co/storage/v1/object/public/site-content/crude-model-doc-brown.jpg-bba5bd313844b8f2c399fdb86063cee5.jpg)

Here is the script:

```javascript
#!/usr/bin/env node
var dir = require('node-dir');
const fs = require('fs');

async function run() {

  dir.readFiles(__dirname, {
    excludeDir: ['node_modules'],
    match: /.ts$/,
    }, function(err, content, filename, next) {
        if (err) throw err;
        
        const response = fetch('http://127.0.0.1:3000/api/typescript-to-javascript', {
          method: "POST",
          body: content,
        }).then((response) => {
          response.text().then((value) => {

            fs.writeFile(filename, value, err => {
              if (err) {
                console.error(err);
              }
            });

          })
        })
        
        next();
    },
    function(err, files){
        if (err) throw err;
        console.log('finished reading files:');
    });


}
run();
```

This just does the .ts files, you can see the match line which you can change to .tsx to process those.

All this does is: loop over files (ignoring node_modules) and posts any .ts content to our transform.tool running locally. It then writes out the response and saves the file.

You will need to ensure you have an up-to-date nodejs install so fetch is available and you'll have to **npm install node-dir.**

With this done, we jus thave to change file extensions.

### Step 5 - Rename files

Just a bit of bash to change our .ts files to .js and our .tsx to .jsx:

```bash
find ./ -depth -name "*.ts" -exec sh -c 'mv "$1" "${1%.ts}.js"' _ {} \;
find ./ -depth -name "*.tsx" -exec sh -c 'mv "$1" "${1%.tsx}.jsx"' _ {} \;
```

### **Step 6 - Build and fix**

Run your build step. See what's broken.

In my instance, there were about 3 occurences where the transform.tool had put in unwanted function brackets. Easy to fix.

### Step 7 - Test

Obviously, don't skip this step. You wouldn't, of course.

And hey-presto, you're done. This took me a couple of hours of experimentation. Hopefully this helps you do things a little faster.

![Our project converted from TypeScript to JavaScript](https://pedeywbqjyubfaejkuek.supabase.co/storage/v1/object/public/site-content/typescript-convert-to-javascript.png-055fc18c59c4db747525207f33f62885.png)

Please check out our project [BoardShape.com](https://boardshape.com) if you’re interested in running better board meetings with our [Board Management Software for Startups.](

large_typescript-convert-to-javascript.png

medium_typescript-convert-to-javascript.png

small_typescript-convert-to-javascript.png

thumbnail_typescript-convert-to-javascript.png

xsmall_typescript-convert-to-javascript.png

TypeScript has been slowing down our development for a while. It makes pair programming more difficult than it needs to be so we converted our project to JavaScript. DHH says we should, so why not. Here's how we did it.

How we converted our project from TypeScript to JavaScript

# 	

I was excited to start the integration of [Paddle](https://paddle.com/) with [BoardShape](https://boardshape.com/). The fact [Paddle is a MoR (Merchant of Record)](https://www.paddle.com/blog/what-is-merchant-of-record) should make life substantially easier from an admin perspective. Having previously worked with Stripe though and their amazing DX I found the Paddle process for JS somewhat lacking. Link this file, do some stuff.

As [BoardShape (Board Management Software for Startups)](https://boardshape.com/) is written in NextJS and React using TypeScript I wanted a better way to work with it. I found a few examples but none of them were really terribly React friendly.

I know Paddle are working on an improved version:

![Paddle DX improvements in the pipeline](https://pedeywbqjyubfaejkuek.supabase.co/storage/v1/object/public/site-content/paddle-tweet.png-ee48eb334b2f9bf3b7d805cded2940e2.png)

Until then though, the cleanest way to consume Paddle would seem to be a context provider.

Here's what you need to do to make it work:

Add in to a **types.d.ts** somewhere in your project:

```js
declare global {
  var Paddle: any
}

export {}
```

There's a few examples out there (such as https://stackoverflow.com/questions/65842582/how-to-integrate-paddle-with-nextjs) where people have provided stronger types, however, unless there is something official from Paddle I don't massively see the point in adding it so I've just typed it to **any**.

Now, add your context provider **PaddleProvider.tsx**

```js
'use client'

import { createContext, useState } from 'react'
import Script from 'next/script'

type PaddleContext = any

const PaddleContext = createContext<PaddleContext>(null)

const PaddleProvider = ({ children }: { children: React.ReactNode }) => {
  const [paddle, setPaddle] = useState(null)

  return (
    <PaddleContext.Provider value={paddle}>
      <>
        <Script
          src="https://cdn.paddle.com/paddle/paddle.js"
          onLoad={() => {
            if (process.env.NEXT_PUBLIC_PADDLE_SANDBOX) {
              Paddle.Environment.set('sandbox')
            }
            Paddle.Setup({
              vendor: Number(process.env.NEXT_PUBLIC_PADDLE_VENDOR_ID),
            })
            setPaddle(Paddle)
          }}
        />
        {children}
      </>
    </PaddleContext.Provider>
  )
}

export { PaddleProvider, PaddleContext }

```

Note the two env vars NEXT_PUBLIC_PADDLE_SANDBOX and NEXT_PUBLIC_PADDLE_VENDOR_ID that you need to add to your .env file.

Also note, we set the initial state to null, not undefined. The reason will become apparent in the context consumer.

Next, add a **ContextConsumer.tsx**

```js
import { useContext } from 'react'
import { PaddleContext } from '@components/Paddle/PaddleProvider'

// context consumer hook
const usePaddleContext = () => {
  // get the context
  const context = useContext(PaddleContext)

  // if `undefined`, throw an error
  if (context === undefined) {
    throw new Error('usePaddleContext was used outside of its Provider')
  }

  return context
}

export { usePaddleContext }

```

Next, in our page where we use Paddle, wrap everything in the provider (this is only a snippet):

```js
import { PaddleProvider } from '@components/Paddle/PaddleProvider'

...

return (<PaddleProvider>
  YOUR COMPONENTS
</PaddleProvider>)
```

I only wrap paged where I know I need paddle so you may not want to wrap your entire app with this provider as it will cause the remote JS to load.

Now, wherever you need Paddle:

```js
import { usePaddleContext } from '@components/Paddle/PaddleConsumer'

...

const paddle = usePaddleContext()

if (paddle) {
  //It's loaded do some stuff
}
```

That's it. I look forward to this post being made obsolete by Paddle hopefully releasing a React/Typescript friendly library that can just be installed in to your project with a package manager.

medium_paddle-tweet.png

small_paddle-tweet.png

thumbnail_paddle-tweet.png

xsmall_paddle-tweet.png

Paddle JS does not fit in to a React / Next JS world very cleanly. Here we look at how you can create a context provider to load the Paddle JS library and then consume it within your app.

Creating a React Context Provider for Paddle JS with Typescript

Supabase auth is great, very simple to get going with and add third-party oAuth providers such as Google.

For our app [BoardShape](https://boardshape.com) (lightweight board management software for startups) we have a profile table in the public schema. We use a UUID field and when a user is created in Supabase we create a corresponding profile record with the same ID. So any entry in profiles represents a user managed by Supabase with the exact same ID. Our table definition looks like this:

```sql
CREATE TABLE public.profiles (
 id uuid NOT NULL,
 updated_at timestamptz NULL,
 avatar_url text NULL,
 first_name varchar NULL,
 last_name varchar NULL,
 email varchar NULL,
 has_set_password bool NOT NULL DEFAULT false,
 created_at timestamptz NULL DEFAULT now(),
 title text NULL,
 CONSTRAINT profiles_pkey PRIMARY KEY (id)
);
```

Simple table with a few details and we want to get as much as this from the initial account creation handled by Supabase. So, how do we do this and also copy over the user’s profile pic.

We add a function to our public schema (the schema that holds our tables not the supabase auth tables):

```sql
CREATE OR REPLACE FUNCTION public.create_profile_for_user()
 RETURNS trigger
 LANGUAGE plpgsql
 SECURITY DEFINER
AS $function$
BEGIN
  INSERT INTO public.profiles (id, email, first_name, last_name, avatar_url, has_set_password)
  SELECT
    new.id,
    new.email,
    COALESCE(split_part(jsonb_extract_path_text(new.raw_user_meta_data, 'full_name'), ' ', 1), NULL),
    COALESCE(split_part(jsonb_extract_path_text(new.raw_user_meta_data, 'full_name'), ' ', 2), NULL),
    COALESCE(jsonb_extract_path_text(new.raw_user_meta_data, 'picture'), jsonb_extract_path_text(new.raw_user_meta_data, 'avatar_url'), NULL),
    CASE WHEN new.encrypted_password IS DISTINCT FROM '' THEN true ELSE false END;

  RETURN new;
END;
$function$
;
```

This is fairly straight forward but the lines for first_name, last_name and avatar_url are a bit icky because they come back from google in the raw_user_meta_data field in a json object. If we don’t get the data, we just insert nulls.

The bit at the end about new.encrypted password is because we just keep a boolean flag in our profiles table to determine if the user has a password set or not.

_**Note.** You can use this exact same process for other oAuth providers but the details are likely not in the same place, so this trigger would need to be more involved to determine the oauth provider which you can pull from raw_app_meta_data on the auth.users table but again, it’s json, so you’ll have to extract it carefully._

Once you have this function you just need a trigger setup on the auth.users table as follows:

```sql
create trigger create_new_profile_for_user after
insert
    on
    auth.users for each row execute function create_profile_for_user();
  ```
  
  We also have an function and update trigger for recording the password being set or not like this:
  
  ```sql
  CREATE OR REPLACE FUNCTION public.handle_update_user_password_status()
 RETURNS trigger
 LANGUAGE plpgsql
 SECURITY DEFINER
 SET search_path TO 'public'
AS $function$
begin
  update public.profiles
  set has_set_password = CASE WHEN new.encrypted_password IS DISTINCT FROM '' THEN true ELSE false END
  where id = new.id;
  return new;
end;
$function$
;
```

```sql
create trigger update_user_password_status after
update
    of encrypted_password on
    auth.users for each row execute function handle_update_user_password_status();
  ```
  
  Remember, when working with Supabase and postgres in general, don’t be afraid of triggers and functions. It takes a bit of a mental shift for some putting logic like this in the database but it’s fast, reliable and [can really help with RLS as well](https://boardshape.com/engineering/how-to-implement-rls-for-a-team-invite-system-with-supabase).
  
  Please head over to [boardshape.com](https://boardshape.com) and ]try our product](https://boardshape.com/dashboard#signup). We’ve had a lot of fun working with Supabase and Next 13. You can also follow us on Twitter at [/boardshape](https://twitter.com/boardshape).

small_sql.webp

thumbnail_sql.webp

xsmall_sql.webp

Supabase auth is great and allows you to easily connect oAuth providers. In this blog post we will show you how you can pull through google profile details just using SQL

How to verify Paddle Webhooks in your Supabase Edge Functions

Get your Board Management in Shape