Logging in to local setup about compito

[wwwclaes]

Phew, I finally got it working. CORS needed to be configured for my localhost server so I added 'http://localhost:3333' to the allowList in main.ts.

But the really tricky part was finding out why I got the 40x for every page after login. It turned out to be an ending "/" that was needed in AUTH0_ISSUER_URL.

Now I will take a break from this, but hopefully come back with suggestions of useful patches regarding this. Looking forward to get to know the application a little better now! I am looking for a good starting base for NestJS and Angular, and this is the best candidate I have found. Thank you for that!

[wwwclaes]

As far as I can tell, these were my current patches to get it to work. All of these are not necessary (such as MySQL). There are probably also other considerations, such as the development environment and versions thereof. Good luck! :-)

.env:

DATABASE_URL=mysql://XXXUSR:XXXPWD@localhost/compito
ADMIN_PASS=XXXPWD

AUTH0_AUDIENCE=compito
AUTH0_ISSUER_URL=https://XXXURL.us.auth0.com/
AUTH0_DB=compito
AUTH0_DOMAIN=XXXURL.us.auth0.com
AUTH0_CLIENT_ID=XXXID
AUTH0_CLIENT_SECRET=XXXSECRET
# for dev env
AUTH0_MANAGEMENT_TOKEN=

# secret used to encode the session token in Auth Action
SESSION_TOKEN_SECRET=XXXSECRET
CLAIM_NAMESPACE=https://compito.adi.so

# S3 creds
FILE_STORAGE_ACCESS_SECRET=XXXSECRET
FILE_STORAGE_ACCESS_KEY=XXXKEY
FILE_STORAGE_URI=XXXBUCKET
BUCKET=XXXBUCKETNAME

# Sentry error monitoring
SENTRY_API_DSN=XXXSENTRYDSN
SENTRY_RELEASE=0.0.0

main.ts:

const allowList = ['http://localhost:4200', 'https://compito.adi.so', 'http://localhost:3333'];

environment.ts:

audience: 'compito'
domain: 'dev-XXX.us.auth0.com'
clientId: 'XXXID'

package.json:

"start-api": "ng serve api"

"prisma": {
  "seed": "ts-node prisma/seed.ts"
}

"@types/node": "^14.14.33",

"typescript": "^4.4.4",

schema.prisma:

provider = "mysql"

[wwwclaes]

...or maybe localhost setup is not possible without a public ip?

Looking at the Auth0 Action for organisation selection, it seems to call the host configured in API_URL. I guess that can't be localhost (assuming it is called from the Auth0-server)? I get an "Access denied" there so I'm guessing that is (at least) part of the problem.

[wwwclaes]

Documenting as I go, since it might be of use to anyone else trying to set this up. I have been programming for decades, but the SPA and Typescript world is new to me - so there may be some newbie stuff sprinkled here and there :-)

Anyhow, my first problem was that I hadn't setup the Action's environment variables correctly. BTW these are "hidden" in the key symbol to the left of the action. I also then missed the "/app" part in "http://localhost:4200/app", but that didn't matter much because (as suspected) localhost can not be called from Auth0 Actions:

https://community.auth0.com/t/is-there-a-way-to-use-localhost-as-the-axios-post-destination-for-auth0-actions/62452

Right now I'm trying with...

ngrok http 3333 -host-header="localhost:4200"

...but I seem to get a 404.

Tip for others: To see the console.log:s from the Action, you should install the Auth0 "Real-time Webtask Logs" extension and inspect them from the page that the extension then provides.

[wwwclaes]

I'll keep going with my attempts and my diary here :-)

All of a sudden, I managed to login. I'm pretty certain I didn't change anything. I was testing ngrok from another server (using wget), to confirm that it can be called from elsewhere and it worked with "/api/ping" and gave expected "403 Forbidden" with "api/users/auth".

Then, as I was retesting with an actual login it started working. I'm in now, but on shaky legs. Organisation is null & that is probably the reason most other pages has very limited functionality. I can console.log that the Action has the correct org, but it seems to get lost between the setCustomClaim and the actual app. To be continued.

[wwwclaes]

Organisation null was due to me setting environment variable CLAIM_NAMESPACE to my own domain. However, "https://compito.adi.so" is used in a number of places in the code, so I reverted to that for know.

Getting closer... I have an organisation, but all the pages are pretty empty and I get "404" on each page such as "/api/projects" and "/api/tasks/my" (in the Nest logs). Here is an extract:

    res: {
      "statusCode": 404,
      "headers": "[Redacted]"
    }
    responseTime: 1
    req: {
      "id": 36,
      "method": "OPTIONS",
      "url": "/api/projects",
      "query": {},
      "params": {
        "0": "projects"
      },

Googling this make me think this might be due to me commenting out CORS from the Nest boostrap. But when I enable that again, I'm back to the earlier "login followed by an immediate logout and invalid session"-scenario. It seems I need to get CORS working with ngrok. It seems to work since I can wget "/api/ping" from another server through the ngrok address, but somehow I anyhow end up with the immediate logout from Compito.

Time for a break, it feels there are to many unknown factors at play and I probably need to read up on it.

[anjana7lk]

Hi, I'm trying to get the project set up, but facing many issues. Could you please let me know the steps you followed in getting the project running? your help is much appreciated. Thanks in advance.

[anjana7lk]

Thanks for your prompt reply and I was trying the suggestions you gave for past few days. But not even close to get it up and running. I'm new to all node/ubuntu ect and trying to set this project up a learn more. Any feedback you can give regarding the below error please? Also do we have to create the db or will it get created when we run sudo docker-compose up -d ..... I don't see my db is created.

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli '/home/anjana/.nvm/versions/node/v14.21.1/bin/node',
1 verbose cli '/home/anjana/.nvm/versions/node/v14.21.1/bin/npm',
1 verbose cli 'run',
1 verbose cli 'start'
1 verbose cli ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle [email protected]prestart: [email protected]
6 info lifecycle [email protected]start: [email protected]
7 verbose lifecycle [email protected]start: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]start: PATH: /home/anjana/.nvm/versions/node/v14.21.1/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/home/anjana/projects/compito/node_modules/.bin:/home/anjana/.nvm/versions/node/v14.21.1/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin:/snap/bin
9 verbose lifecycle [email protected]start: CWD: /home/anjana/projects/compito
10 silly lifecycle [email protected]start: Args: [ '-c', 'ng serve' ]
11 silly lifecycle [email protected]start: Returned: code: 1 signal: null
12 info lifecycle [email protected]start: Failed to exec start script
13 verbose stack Error: [email protected] start: ng serve
13 verbose stack Exit status 1
13 verbose stack at EventEmitter. (/home/anjana/.nvm/versions/node/v14.21.1/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
13 verbose stack at EventEmitter.emit (events.js:400:28)
13 verbose stack at ChildProcess. (/home/anjana/.nvm/versions/node/v14.21.1/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:400:28)
13 verbose stack at maybeClose (internal/child_process.js:1088:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:296:5)
14 verbose pkgid [email protected]
15 verbose cwd /home/anjana/projects/compito
16 verbose Linux 5.15.0-53-generic
17 verbose argv "/home/anjana/.nvm/versions/node/v14.21.1/bin/node" "/home/anjana/.nvm/versions/node/v14.21.1/bin/npm" "run" "start"
18 verbose node v14.21.1
19 verbose npm v6.14.17
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] start: ng serve
22 error Exit status 1
23 error Failed at the [email protected] start script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

[wwwclaes]

Sorry, I'm probably not the right person to help you out. This is a new environment for me as well, and it is just a side project so there is not much time nor experience yet.

With that said, "it works for me" when I start it via "nx serve --disable-host-check" and "nx serve api". I'm using node 16.14.2 and npm 8.18.0. I'm using IntelliJ for development and debugging. I'm also using "lt --port 3333 --subdomain mylocalnestjs" and "lt --port 4200 --subdomain mylocalangular --local-host localhost" for tunneling, so that I don't need to update Auth0 at every restart.

Regarding Docker and DB, I'm not using Docker for this project. I have changed it to use my own local MySQL server, just to make it easier to tinker with it.