Lets get the base readme in the top level of the project figured out...

• Backend Details
• iframe Details
• Frontend Details
• Project Plan
• Contributors List
• Companies Using Software List

THIS IS LOW PRIORITY BUT WILL BE A NICE TO HAVE, IF YOUR INTERESTED LET'S CHAT

Work in progress. You can see a demo of the user registration. @hkd987 Seems like we can register multiple times with the same email address. Am I missing something?

As a project we want to choose the best frontend frame work that will not only support long term success but also attract the right mix of developers and contributions. Currently we have a few contenders and want to get open feedback from the community as to what they feel will work for us.

• Vue 3
• React
• Svelte
• Preact

Taking the above options give us some pros and cons of each framework and what you would choose if you were starting a new project today.

The frontend is how most of our users will interact with the application some of the key requirements are as follows.

This depends on at the least #2 being done. so to allow the Login & Registration pages to be completed.

• Login & Registration page uses the iframe design, if iframe changes are needed to support use cases lets talk
• Dashboard that shows current projects
• Clicking on projects will show users in that project
• Allow exporting of projects users
• Should allow creation of new projects
• Dashboard should have a settings option
• Settings should allow payment (if env is set)
• Settings should allow account deletion and clearing of all users

I think this is a solid starting point to get started on design,

In my mind this is very basic left menu and main screen

The left menu has Projects, and Settings

IF YOU PLAN TO CONTRIBUTE OR WORK ON THIS ISSUE, LETS CHAT FIRST TO SYNC UP.

https://app.bountysource.com/issues/104978541-frontend-design-build-static-frontend

While setting up the backend component on my machine, I noticed that sql tables are not being created on my postgresql database, I have confirmed that my database credentials are correct.

I have DATABASE_FORCE_SYNC=yes enabled. Am I missing something?

Currently there are a couple holes in the backend DB design, the goal of this issue will be to finish the backend DB design.

Currently we have...

• Users who have a login, these are users for our application or the base application
• Users who have many projects

Project is a reference table to the Postgres schema where the Users -> Users will live, They will use the same Users and Login table that already exists meaning that we will be dog fooding our own application.

What we need to figure out still is as follows.

• Secure access by JWT or API key to the correct table, this could mean a few things, one could be that a JWT includes a projectId reference, this could mean that we also need an API key table that relates to a project where a project could have many keys, and keys could be public or private keys. where a private key allows full access on the project and a public key only allows login and registration on that project.
• We need to figure out a way to boot strap the init project where an open source user will be able to call a query that starts the first project
• When this first project is made we want to ensure that the init project feature is then no longer working, this could be a resolver
• We need to write resolvers for each model with auth logic that allow the app to be secure
• Each project needs its own JWT signing key that will be stored in the DB, this will not be shared with anyone but will be used by the API to verify tokens. By giving each project its own key we allow ourselves to ensure that the JWT are unique for each project
• Any other issues that come out of this.
• Track if a user account is a paid account using stripe integration
• Stripe checkout pages will be used, will need db models around this, Payment table that belongs to a user a user will haveOne payment
• Payment feature will be enabled by a ENV setting, and

Im not sure at this point if we can break this work down further or if its ready to go as is....This is a pretty high level overview and could need more discussion.

IF YOU PLAN TO CONTRIBUTE OR WORK ON THIS ISSUE, LETS CHAT FIRST TO SYNC UP.

Tailwind CSS is set up in this PR. A good place to start defining the front-end's structure.

There is a mini Svelte demo set up in there. Let me have your thoughts. :v:

We can build on that for the front-end.

It is built on Vitejs, so we can get support from the dev team & the community.

We can easily set up Tailwind CSS with the official guide for SvelteKit.

Using the command npx degit [sveltejs/template](https://github.com/sveltejs/template) my-svelte-project to replace the frontend folder and spin up a new svelte project in the mono repo

The main difference between this and what @evanyang1 put up is that this use the frontend folder structure already in place.

After completion of #1 & #2 we should be ready to wire up the business logic for our iframe.

This issue if not already completed by #2 could also include putting a publishing and design system in place but might not. This ticket should allow the iframe to load quickly and will need the following logic

• Login users, users
• Register users, users
• Display "Powered By Authsio" link for unpaid accounts
• Remove "Powered By Authsio" for paid accounts
• Should read the users public api key for this information
• Should handle basic email validation rules, maybe HTML5 email validation is enough
• Should handle basic password validation rules, maybe HTML5 password validation is enough
• Should score over 90% on lighthouse across the board. We do not want to slow down users websites

IF YOU PLAN TO CONTRIBUTE OR WORK ON THIS ISSUE, LETS CHAT FIRST TO SYNC UP.

A large part of IAM will involve this iframe that users will drop into their website, it should look amazing and allow users to add basic styles to match their website, The goal of this issue, will be to build out and design the basic iframe so that in a follow up ticket we can wire it up using the customers API key to the backend resolvers.

• The iframe should include a email, and password input boxes,
• The iframe should allow registration and login designs,
• The buttons on each should say, Login vs Register.
• The iframe should included a powered by authsio link at the bottom (link will be removed for a small fee but when self hosting will allow this link to be removed or customized). This is not a concern for the static coded design but more a note.
• This ticket might also included choosing a build and design pattern around the iframe, for the right contributor but this can be discussed in the comments.

This should be a working static design and will just be missing the calls to the backend resolvers.

https://app.bountysource.com/issues/104978539-iframe-design-build-static-user-login-iframe

IF YOU PLAN TO CONTRIBUTE OR WORK ON THIS ISSUE, LETS CHAT FIRST TO SYNC UP.

This depends on #1, and being done but this documentation will need to live in its own docs folder in the top level of the project along with all other docs

TODO: spin up framework for documentation

IF YOU PLAN TO CONTRIBUTE OR WORK ON THIS ISSUE, LETS CHAT FIRST TO SYNC UP.

This depends on #1, and #3 being done but this documentation will need to live in its own docs folder in the top level of the project.

TODO: spin up framework for documentation

IF YOU PLAN TO CONTRIBUTE OR WORK ON THIS ISSUE, LETS CHAT FIRST TO SYNC UP.

Need multiple deployment codes but to start we will focus on a couple and it might be broken down by project.

Backend

• Lets focus on a backend using docker on cloud run, with a CI/CD pipeline

Frontend & Iframe

• Vercel or Netlify might be good options and simple to set up here

Self hosted

• Standalone docker image for self deployment.

This issue will need some more refinement when it comes time to work.

IF YOU PLAN TO CONTRIBUTE OR WORK ON THIS ISSUE, LETS CHAT FIRST TO SYNC UP.