supaflare/supaflare

URL shortener / redirection service powered by Supabase, Cloudflare Workers, Workers KV and Cloudflare Pages.

About

Launch your own personal URL shortener / redirection service using free tiers of Supabase, Cloudflare Workers, Workers KV and Cloudflare Pages.

Features

• Redirection based on device type (Default / Android / iOS)
• Support various URL protocols
• Front-end web application for link management

Demo

1. Visit https://supaflare.licit.dev. Also accessible through https://supaflare.pages.dev.

2. Use Magic Link to login or sign in with GitHub.

3. Create and manage your links!

   URLs have to start with a protocol such as https://, ftp://

   Custom protocols are supported (eg: tg:// opens the Telegram app).

4. Test your links at https://out.licit.dev/slug

Supabase Features Used

Auth

Provide authentication and segretation of data between different users.

Database

Store redirection links and metadata.

JS Library

Convenient access to access the above Supabase features used.

Cloudflare Features Used

Cloudflare Workers

Perform URL redirection and to update link data.

Workers KV

Read and store link data used when redirecting web requests.

Cloudflare Pages

Host the front-end Vue 3 web application.

Installation Guide

Fork Supaflare

Create a Fork of Supaflare as the deployments are pushed via GitHub Actions.

Set up Cloudflare Workers

1. Sign up for a Cloudflare Workers account.
2. Copy the Account ID shown in the Workers page somewhere, you will require it later.
3. Copy the Subdomain shown in the Workers page somewhere, you will require it later.
4. Head over to KV tab, add a new namespace called SUPAFLARE.
5. Update the id found in /worker/wrangler.toml with the one you have just created.
6. Head over to API Tokens and create a new Custom API Token with Permission of "Account/Worker Scripts/Edit".
7. Copy the API Key somewhere, you will require it later.

Set up Supabase

1. Sign up for a Supabase account.
2. Create a new Project.
3. Click SQL on the left menu bar and select + New query.
4. Copy the contents found in /app/src/database.sql and run it in.
5. Click Settings on the left menu bar and select API.
6. Copy the Project API key > anon / public somewhere, you will require it later.
7. Copy the Config > URL somewhere, you will require it later.
8. Copy the Config > JWT Secret somewhere, you will require it later.

Set up Cloudflare Pages

1. Sign up for a Cloudflare Pages account.
2. Create a new project, selecting the fork of Supaflare in your GitHub account.
3. Set the framework preset as Vue.
4. Set the build output directory as dist.
5. Set the root directory path as app.
6. Create the following environment variables:
   1. VITE_SUPABASE_KEY with the Project API key > anon / public.
   2. VITE_SUPABASE_URL with the Config > URL.
   3. VITE_SUPAFLARE_WORKER_URL with https://supaflare-worker.<your workers subdomain>.workers.dev.
7. After the first build is completed, pause the Automatic git deployments.
8. Add a new deploy hook, copy the Deploy hook URL somewhere, you will require it later.

Configure GitHub Actions

1. Open the forked GitHub project > Settings > Secrets.
2. Create the following repository secrets:
   1. CLOUDFLARE_ACCOUNT_ID with the Account ID.
   2. CF_API_TOKEN with the API Key.
   3. CF_PAGES_MASTER_WEBHOOK_URL with the Deploy hook URL.
   4. SUPABASE_API_KEY with the Project API key > anon / public.
   5. SUPABASE_JWT_SECRET with the Config > JWT Secret.
   6. SUPABASE_URL with the Config > URL.
   7. SUPAFLARE_ADMIN_KEY with a random non-empty string, used as secret for manual updates.
   8. MASK_WORKER_URL with your worker hostname for masking. Eg: test.workers.dev
3. Click on the Actions tab, manually run the workflows.

Configure Supabase Auth

Please set the Site URL in Supabase Settings > Auth settings to be the URL of your Cloudflare Pages site. For external OAuth providers, refer to the auth guide provided by Supabase.

Restrict Web Application Access

You may restrict the access to your web application using Cloudflare Access based on your requirements.

Upcoming Features

• Search & Filtering of Links
• QR Code Display
• Link Expiry Datetime
• Password Protection
• Country Redirect

Developed by licitdev

supaflare's Issues

`npm install` problem

Hi there
I tried to deploy this but I faced an error:

thanks in advance

still getting error

Hi again

I still get this error
 

I followed the instruction step-by-step

---

your service also has this problem

its more complicated now

[Feature Request] Also redirect sub paths

For example, I have added the following redirection:

https://supaflare.mydomain.com/github -> https://github.com

Is it possible to automatically redirect all sub paths of https://github.com without adding new redirection? Like this:

https://supaflare.mydomain.com/github/sainnhe/dotfiles -> https://github.com/sainnhe/dotfiles

[Feature Request] Anti Phising check

Hello,
Love Supaflare!
I do however always had concerns about abuse. Then I saw someone online refer to this repo with a Phising Database, I think that would work wonders to avoid abuse of the service.
I think checking the static list could add a lot of quick value to avoid the service being used by users we don't want in.

• Avoid URLs with tagged domains
• If domain becomes tagged, soft delete and/or revoke the URL

Let me know what you think!

Cloudflare Pages deploement problem

Hi
CF-pages couldn't deploy website

15:24:12.144 | Success: Finished cloning repository files
-- | --
15:24:12.747 | No build command specified. Skipping build step.
15:24:12.748 | Note: No functions dir at /functions found. Skipping.
15:24:12.748 | Validating asset output directory
15:24:12.748 | Error: Output directory "dist" not found.
15:24:15.588 | Failed: build output directory not found

https://github.com/supaflare/supaflare#set-up-cloudflare-pages
there is no /dist directory in repo but its mentioned that I have to set it

thanks in advanced