A personal "My Account" dashboard built specially for use with the Logto Authentication Platform.
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
have now migrated the 2 projects together for easier development, project management and app deployment.
You can access the demo at logto-demo-account-dashboard.pages.dev.
and can login with
- Username: demo@example.org
- Password: demopassword
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