IdentityServer OpenIdConnect adding an api as a scope

I have a project running on localhost:44387 which is the IdentityServer configuration.
I have an ASP.NET Core application running on localhost:44373 which acts as a front end application for the user to engage with and another ASP.NET Core application running on localhost:44353 which acts as an API.

When the user tries to access an authorized controller in the front end application, they are redirected to the login page on the IdentityServer.
Once the user has logged in, they are redirected back.

They are then authorized on the front end application, but when calls are being made to the API on localhost:44353, it returns unauthorized.

I have tried to add a scope to the .OpenIdConnect method to add the API as a scope but it crashes the application when redirecting to the login page.

How can I add the API as a permission to request, so once the front end application is authorized it can call the API?

This is in the Config.cs file for the IdentityServer

                new Client
                {
                    ClientId = "mvc",
                    ClientName = "MVC Client",
                    AllowedGrantTypes = GrantTypes.Implicit,

                    // where to redirect to after login
                    RedirectUris = { "https://localhost:44373/signin-oidc" },

                    // where to redirect to after logout
                    PostLogoutRedirectUris = { "https://localhost:44373/signout-callback-oidc" },
                    AllowedScopes =
                    {
                        IdentityServerConstants.StandardScopes.OpenId,
                        IdentityServerConstants.StandardScopes.Profile,
                        "roles",
                        "staff_api" // <---- Add staff api as scope
                    },
                    RequireConsent = false,
                }

Inside the Startup of the front end app

services.AddAuthentication(options =>
            {
                options.DefaultAuthenticateScheme = CookieAuthenticationDefaults.AuthenticationScheme;
                options.DefaultScheme = CookieAuthenticationDefaults.AuthenticationScheme;
                options.DefaultChallengeScheme = "oidc";
            })
                .AddCookie(CookieAuthenticationDefaults.AuthenticationScheme)
                 .AddOpenIdConnect("oidc", options =>
                 {
                     options.Authority = baseAuthAddress;
                     options.RequireHttpsMetadata = false;

                     options.ClientId = "mvc";
                     options.SaveTokens = true;
                     options.GetClaimsFromUserInfoEndpoint = true;

                     //options.Scope.Add("staff_api"); <--- THIS MAKES IT CRASH?
                     options.Scope.Add("roles");

                     // Fix for getting roles claims correctly :
                     options.ClaimActions.MapJsonKey("role", "role", "role");

                     options.TokenValidationParameters.NameClaimType = "name";
                     options.TokenValidationParameters.RoleClaimType = "roles";
                 });

Inside Startup.cs of API

services.AddAuthentication("Bearer")
                .AddJwtBearer("Bearer", options =>
                 {
                     options.Audience = "staff_api"; ;
                     options.Authority = Configuration["AuthURL"];

                 });

Have you added and seeded an ApiResource and ApiScope on the IdentityServer side? (With the newer versions of IdentityServer)

Like shown in the quickstarts? Since we don't see the full Config.cs file, that would be the first thing to check.
You should also have a look at the .well-known/openid-configuration of your IS4, to see if the scope for the api is registered in the section scopes_supported (see link to quickstart as well).

The Debug output of IdentityServer, TokenValidationMiddleware on the API side and the AuthenticationMiddleware on the client side are very verbose, you should check the debug output for entries that inform you what is not working.

Also you should not use GrantTypes.Implicitfor Asp.Net Core applications if it is not
a SPA, this type is intended for JS-based front-ends.