Cookies do not work in Firefox and Safari and don't let me log in, but work fine in Chrome and Opera

Question

I know questions like this have been asked before, but any answers didn't solve my problem. I have a problem with an Asp.net Core C# project(Angular frontend). It uses Auth0 authentication. It logins correctly in Chrome but it sticks in the login page in Firefox and Safari.

When I allow third-party cookies in Firefox by turning off Enhanced Tracking Protection, it logins correctly in Firefox so it seems to have a problem with cookies. It's my 'Startup.cs' file codes:

public void ConfigureServices(IServiceCollection services)
{
    // Other service configurations...
    services.AddCors(options =>
    {
        options.AddPolicy("AllowSpecificOrigin",
            builder =>
            {
                builder.WithOrigins("https://X.com", "https://staging.X.com", "http://localhost:4200")
                .AllowAnyHeader().AllowAnyMethod().AllowCredentials().SetIsOriginAllowed((host) => true);
            });
    });

    // Other service configurations...

    services.Configure<CookiePolicyOptions>(options =>
    {
        options.CheckConsentNeeded = context => true;
        options.MinimumSameSitePolicy = SameSiteMode.None;
        options.HttpOnly = Microsoft.AspNetCore.CookiePolicy.HttpOnlyPolicy.None;
        options.Secure = CookieSecurePolicy.None; // for development without HTTPS
        //options.Secure = CookieSecurePolicy.Always; // Set to Always in production
    });

    // Other service configurations...
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env, ILoggerFactory loggerFactory, AppDbContext context)
{
    loggerFactory.AddAWSProvider(this.Configuration.GetAWSLoggingConfigSection());
    StripeConfiguration.ApiKey = Configuration.GetSection("Stripe")["SecretKey"];
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Error");
        app.UseHsts();
    }
    app.UseHttpsRedirection();
    app.UseStaticFiles();
    app.UseCookiePolicy();
    app.UseHealthChecks();
    app.UsePathBase("/X-api");
    app.UseDefaultFiles();
    app.UseCors("AllowSpecificOrigin");
    app.UseForwardedHeaders(new ForwardedHeadersOptions
    {
        ForwardedHeaders = ForwardedHeaders.XForwardedFor | ForwardedHeaders.XForwardedProto
    });
    app.UseRouting();
    app.UseAuthentication();
    app.UseAuthorization();
    app.UseEndpoints(endpoint => { endpoint.MapControllers(); });
    app.UseMvc();
}

Any thoughts can help me Thank you in advance

Answer 1

I found the solution and it worked for me.

Because cross-origin authentication is achieved using third-party cookies, disabling third-party cookies will make cross-origin authentication fail. Some browsers, such as Firefox and Safari, disable third-party cookies by default, meaning that cross-origin authentication will not work for users on Firefox and Safari. The only way to make embedded login work for Firefox and Safari users is to use a Custom Domain in Auth0.

Enable a Custom Domain on your tenant in Auth0 and host your web application in a domain that has the same top-level domain as your Auth0 custom domain.

For example, you host an application at https://yourDomain.com and set your Auth0 custom domain as https://login.yourDomain.com (instead of https://yourDomain.auth0.com). This way the cookies are no longer third-party because both your Auth0 tenant and your application are using the same top-level domain, and thus, are not blocked by browsers.

For a detailed step-by-step solution to your codes, you can follow Auth0 documentation about Custom Domains.