manifest icon indicating copy to clipboard operation
manifest copied to clipboard

🪪 Auth

Open brunobuddy opened this issue 1 year ago • 5 comments

Description

This PR adds Authentication and Authorization to Manifest backend.

How can it be tested?

1. Serve the docs

  • Clone the https://github.com/mnfst/website repository at the feature/auth branch to get the website and doc
  • Locally change the fetch-content.sh file replacing the git clone line by git clone --depth 1 --branch feat/auth https://github.com/casejs/docs.git content. This allow us to fetch the doc version with the Auth in it.
  • follow the README.md file to serve the docs

You should see it the sidebar the "🔒Auth and Access Control" section.

You can now validate those sections. Make sure that the features are explained correcly.

2. Launch Manifest

From the mnfst/manifest repo (this one). Execute the following commands:

cd packages/core/manifest
npm install
npm run link-local-types
npm run start:dev

Then open your browser at http://localhost:1111/api to see the API doc. You should see an "Authorize" button in the top right and a new section called "Auth" below.

What to test here:

  • Create an authenticable entity in your backend.yml. You should see the authentication endpoints in the "Auth" section of the OpenAPI UI. Try to signup, login, etc.
  • Add policies to your entities, and see the request responses. You can execute requests trough the OpenAPI UI or through Postman or other API tool.

3. Use JS SDK for Auth features

  • Keep the "manifest" task running from previous step
  • Clone the https://github.com/mnfst/js-sdk repository branch feature/auth
  • Open the README.md and follow instructions to use the React example app

What to test here: Follow the Auth docs and play with the use SDK features (login, logout, signup)

Style requests

@SebConejo For the OpenAPI UI I would like to have some style improvements for better understanding.

  • Bring back method tag colors. Below the code color used by Postman. We can use something similar in Manifest color scheme. There is many endpoints in the list and it is hard to make the difference.
  • Change favicon using a peacock of another color to make the difference between API doc and Admin panel
  • (optionnal): hide the Swagger topbar

image

Impacted packages

Check the packages that require a new publication or release:

  • [x] @mnfst/manifest
  • [x] @mnfst/types
  • [x] @mnfst/admin
  • [x] @mnfst/js-sdk
  • [x] doc
  • [x] website

Check list before submitting

  • [x] I have performed a self-review of my code (no debugs, no commented code, good naming, etc.)
  • [x] I wrote the relative tests
  • [x] I updated the documentation if necessary
  • [x] This PR is wrote in a clear language and correctly labeled

brunobuddy avatar Jul 24 '24 09:07 brunobuddy

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
manifest-schema ✅ Ready (Inspect) Visit Preview 💬 Add feedback Aug 27, 2024 1:21pm

vercel[bot] avatar Jul 24 '24 09:07 vercel[bot]

@brunobuddy

  1. information is missing. I had to try and figure out at what stage to apply the instructions. I need a readme contributor because I wasted a lot of time before succeeding in executing manifest. For example, if I execute what you say in "launch manifest", I get an error telling me that the backend.yml file doesn't exist. Actually, you have to go to the /manifest repo and run npx add manifest first. I also think it would be easier to understand why I need to do certain commands, with a simple English sentence.

  2. Then I'm stuck on the following step:

Create an authenticable entity in your backend.yml. You should see the authentication endpoints in the "Auth" section of the OpenAPI UI. Try to signup, login, etc.

When I add authenticable: true to an Owner, nothing happens. But it seems normal to me since I'm not on watch. But I don't understand how to watch this part. I can't found the information.

In conclusion, I find that the instructions are made for a project with an existing level of contribution information. But in reality, the project isn't at that stage, so I'm stuck.

Should I see a password field in the create-edit page of an authenticable entity ? I don't see it.

Capture d’écran 2024-07-30 à 11 33 19

Capture d’écran 2024-07-30 à 11 34 35

SebConejo avatar Jul 30 '24 09:07 SebConejo

@SebConejo

For step 1 the /manifest/backend.yml file was actually gitignored because we touch it a lot. I added to git so there is no extra step on install. We have to be careful on not commiting it. The steps above should work now.

For step 2 I forgot to add the authenticable fields to the admin panel. I will add them when I work on that feedback. Then the instructions says "You should see the authentication endpoints in the "Auth" section of the OpenAPI UI. Try to signup, login, etc." So litteraly go to the OpenAPI UI at http://localhost:1111/api and checkout the new endpoints for your entity added on the Auth section. You can them try to play around with it.

I am currently working in adding contributing information for all packages.

brunobuddy avatar Aug 01 '24 05:08 brunobuddy

@SebConejo

For step 1 the /manifest/backend.yml file was actually gitignored because we touch it a lot. I added to git so there is no extra step on install. We have to be careful on not commiting it. The steps above should work now.

For step 2 I forgot to add the authenticable fields to the admin panel. I will add them when I work on that feedback. Then the instructions says "You should see the authentication endpoints in the "Auth" section of the OpenAPI UI. Try to signup, login, etc." So litteraly go to the OpenAPI UI at http://localhost:1111/api and checkout the new endpoints for your entity added on the Auth section. You can them try to play around with it.

I am currently working in adding contributing information for all packages.

So we should let it ignored. Why don't we just explain how to contribute, including the fact that we have to do a npx add manifest in the manifestfolder ?

SebConejo avatar Aug 01 '24 07:08 SebConejo

@brunobuddy In the doc, we mention this: Capture d’écran 2024-08-01 à 19 05 51

But if we past it on our front.app.ts, then when I try to get somehting, i got this error: Capture d’écran 2024-08-01 à 19 07 02

On my tests, I had to remove the /apipart ofthe url to fix the error. Capture d’écran 2024-08-01 à 19 07 06

SebConejo avatar Aug 01 '24 17:08 SebConejo