A personal "My Account" dashboard built specially for use with the Logto Authentication Platform.
It is made up of 2 core components.
- The vue3 web client
- The M2M api on cloudflare workers
Why not use page functions instead of 2 separate applications?
- this is so this application stack can be run on platforms other than cloudflare.
- like for example using the cloudflare workerd runtime to run locally with docker
because of the way verification works i dont have a demo setup yet.
however you are welcome to make a account for the build i have at myid.mxs.app, then delete your account from the "Account Actions" then "Terminate Account".
my design inspiration came from a few different account management dashboards but prodominiently
with a few others like wargaming, github, reddit and spotify
- Fork this repository
- Setup the web client first by creating a pages project in cloudflare
- Connect it to your aforementioned forked repository
- Once in your project on the cloudflare dashboard:
- Go to Settings >> Builds and Deployments >> Build Configuration >> Edit configurations
- Change the
Root directory (advanced)
toweb
- Change the
- Go to Settings >> Environment Variables >> Production >> Edit variables
- Add all variables according to the .env.sample file
- Go to Settings >> Builds and Deployments >> Build Configuration >> Edit configurations
- Redeploy Site
- Now we setup the API. Create a worker in cloudflare
- Take note of the name you give the worker
- Now we need to configure the worker:
- In the forked repository navigate to
worker/src/index.js
and on line#17
- Edit the CORS origin of url of your web client.
- example
- i know this is a very jank system and im working on making it easier i promise
- Via Dashboard:
- Go to Settings >> Triggers >> Custom Domain >> Add Custom Domain
- Set a custom api domain for your worker. Remember this value!!
- Go to Settings >> Variables >> Environment Variables >> Add Variable
- Put any secret values in here and once done press 'encrypt'.
- THIS IS INCREDIBLY IMPORTANT as it keeps the apis configuration secure!
- Go to Settings >> Triggers >> Custom Domain >> Add Custom Domain
- Via Wrangler:
- The rest of the configuration will need to be done via the CLI tool: Wrangler
- Clone the forked repo to your local machine
git clone <repo>
- Navigate into the project then worker directory
cd <repo>/worker
- Install and run wrangler:
npx wranger -v
- Configure the
wrangler.toml
, you can edit the sample file- You can either use wrangler or the cloudflare dashboard in the Settings >> KV Namespace Bindings >> Add binding, to create the necessary KV bindings
- If you decide to enable NSFW avatar checking please see This repository for more information. Otherwise, you can omit both of these values
- Once you have configured wrangler you can deploy it!. Run:
npx wrangler deploy
.
- In the forked repository navigate to
- And your dashboard will be ready!
- Fork and clone repository
- Fill out variables in
docker/.env
following the .env.sample - Deploy using docker compose
docker compose up -d
in thedocker
directory - Thats it!
- You will need to configure a reverse proxy for the containers. Here is a example nginx config file