auth0-samples / auth0-angular-samples

Auth0 Integration Samples for Angular 2+ Applications
https://auth0.com/docs/quickstart/spa/angular2
MIT License
282 stars 454 forks source link

Auth0 sample code can't authorize to Web API #344

Closed Hkim91 closed 1 year ago

Hkim91 commented 1 year ago

Recently I updated my web app from about 2 years ago, and I updated auth0 to go with it (I went from 1.5.1 to 2.0.1). I can log in fine, but when I try to use auth0 to call a private route in my C# Web API, it doesn't work anymore. I even tried using the sample applications for both the Angular and C# Web API Quickstarts and it still failed.

frederikprijck commented 1 year ago

Hello,

Not sure how to help you without more context and information. Did you read the MIGRATION GUIDE?

If you are still having issues, please elaborate on how to reproduce the behavior.

Hkim91 commented 1 year ago

Yes, I've read the migration guide. I tried everything. I tried following the Quickstart guide, I tried using the code in the generated sample, I tried changing my audience parameters, everything gives a 401 error.

This is the guide I used. https://auth0.com/docs/quickstart/spa/angular/02-calling-an-api

I also tried using this, but it's just as useless. https://auth0.com/docs/quickstart/spa/angular/interactive?download=true

I highly doubt it's a problem on the API side. Even calling a private route on a sample API project gave me a 401 error.

Here are two implementations I've tried:

AuthModule.forRoot({
      domain: 'APP_DOMAIN',
      clientId: 'CLIENT_ID',
      authorizationParams: {
        audience: '[MANAGEMENT_API]/api/v2/',
        redirect_uri: window.location.origin
      },
      httpInterceptor: {
        allowedList: [
          {
            uri: '[MANAGEMENT_API]/api/v2/*',
            tokenOptions: {
              authorizationParams: {
                audience: 'https://[MANAGEMENT_API].auth0.com/api/v2/'
              }
            }
          }
        ]
      }
    }),
import { environment as env } from '../environments/environment';

AuthModule.forRoot({
      ...env.auth,
      httpInterceptor: {
        ...env.httpInterceptor,
      },
    }),
---------------------
export const environment = {
  production: false,
  auth: {
    domain,
    clientId,
    authorizationParams: {
      ...(audience && audience !== 'YOUR_API_IDENTIFIER' ? { audience } : null),
      redirect_uri: window.location.origin,
    },
    errorPath,
  },
  httpInterceptor: {
    allowedList: [`${apiUri}/*`],
  },
};
frederikprijck commented 1 year ago

I don't see anything wrong with the config, apart from the fact that you are not supposed to call the Auth0 management SDK from the frontend (unless for maybe a couple user specific endpoints)

Can you share a project that's not working, happy to look into it. if you are saying this sample project doesnt work as-is, then there must be something else going on as it works fine for myself and other users.

Hkim91 commented 1 year ago

After trying more random things until it worked, I've managed to get authentication working from my front end to the sample API (I don't know what exactly I did differently this time when I already copied just about the same), but I can't get authorization working with my API, with neither my project nor the sample web page. It still gives me a 401 error.

My Startup.cs has the exact same code as the sample. What is the issue? Does it have something to do with the fact my API uses an HTTPS link? That's the only difference I can think of.

frederikprijck commented 1 year ago

No, https should work fine.

Please provide an application for us to run and look into (both angular and web API, as minimal as possible), without its hard to help because things are supposed to work based on the information provided.

frederikprijck commented 1 year ago

Thanks, I downloaded the zip, filled in both config files, and ran the projects and can hit the private endpoint:

image

Everything seems to be working fine.

I do want to mention that I see you had the following in your API settings file:

"Auth0": {
  "Domain": "[yourtenant].auth0.com",
  "Audience": "https://[yourtenant].auth0.com/api/v2/"
},

Not sure if it's related, but you shouldnt use your api/v2 audience in your own API.

Hkim91 commented 1 year ago

Okay, I see what the problem was. It was using the settings from appsettings.Development.json, which doesn't show up in my project directory for some reason. I changed it and it worked. Thank you for looking into this.