title: Blazor WebAssembly + Amazon Cognito
body: <p>I would like to set up a <strong>Blazor</strong> client-side app with authentication through <strong>AWS Cognito</strong>.</p>
  
  <p>When I run the app I'm not redirected to a login page, instead the page says "Authorizing..." for a few seconds, while I get this error in the console:</p>
  
  <pre><code>The loading of “https://blazorapp.auth.eu-central-1.amazoncognito.com/login?…Q&amp;code_challenge_method=S256&amp;prompt=none&amp;response_mode=query” in a frame is denied by “X-Frame-Options“ directive set to “DENY“.
  This error page has no error code in its security info
  info: Microsoft.AspNetCore.Authorization.DefaultAuthorizationService[2]
        Authorization failed.
  </code></pre>
  
  <p>Then, the default "Hello, world!" index page is shown <strong>(even though as I understand it, it should not be visible to an unauthenticated user based on App.razor definition?)</strong>. If I click on "Log in", I get the same error in console, but then after a few seconds the Cognito-hosted login page opens, I am able to log in, I am redirected back to my app, and the app shows the authenticated user's info in top right corner, but the console is a little weird again:</p>
  
  <pre><code>info: Microsoft.AspNetCore.Authorization.DefaultAuthorizationService[2]
        Authorization failed.
  info: Microsoft.AspNetCore.Authorization.DefaultAuthorizationService[1]
        Authorization was successful.
  </code></pre>
  
  <p><strong>Question 1</strong></p>
  
  <p>How can I get rid of these errors and have my app redirect to Cognito login page without ~10s delay?</p>
  
  <p><strong>Question 2</strong></p>
  
  <p>Why is all content in my app visible at all times regardless of whether I'm authenticated or not? It's as if the <code>NotAuthorized</code> node under <code>AuthorizeRouteView</code> in <code>App.razor</code> had no effect at all, unless I am confusing something here</p>
  
  <p><strong>Code:</strong></p>
  
  <p><em>Program.cs</em></p>
  
  <pre><code>builder.Services.AddOidcAuthentication(options =&gt;
  {
      options.ProviderOptions.Authority = "https://cognito-idp.{aws-region}.amazonaws.com/{cognito-userpoolid}";
      options.ProviderOptions.ClientId = "{cognito-clientid}";
      options.ProviderOptions.ResponseType = "code";
      options.ProviderOptions.RedirectUri = "https://localhost:44306/authentication/login-callback";
      options.ProviderOptions.PostLogoutRedirectUri = "https://localhost:44306/authentication/logout-callback";
  });
  </code></pre>
  
  <p><em>App.razor</em> (as created from template, no modifications)</p>
  
  <pre><code>&lt;CascadingAuthenticationState&gt;
      &lt;Router AppAssembly="@typeof(Program).Assembly"&gt;
          &lt;Found Context="routeData"&gt;
              &lt;AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)"&gt;
                  &lt;NotAuthorized&gt;
                      @if (!context.User.Identity.IsAuthenticated)
                      {
                          &lt;RedirectToLogin /&gt;
                      }
                      else
                      {
                          &lt;p&gt;You are not authorized to access this resource.&lt;/p&gt;
                      }
                  &lt;/NotAuthorized&gt;
              &lt;/AuthorizeRouteView&gt;
          &lt;/Found&gt;
          &lt;NotFound&gt;
              &lt;LayoutView Layout="@typeof(MainLayout)"&gt;
                  &lt;p&gt;Sorry, there's nothing at this address.&lt;/p&gt;
              &lt;/LayoutView&gt;
          &lt;/NotFound&gt;
      &lt;/Router&gt;
  &lt;/CascadingAuthenticationState&gt;
  </code></pre>
  
  <p>I have only modified the call to <code>AddOidcAuthentication</code> in <code>Program.cs</code> myself, all other files were populated by Visual Studio when creating a Blazor WebAssembly App with Individual User Accounts.</p>
  
  <p>I am struggling to get this to work and would greatly appreciate any help on this topic</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Following @aguafrommars's answer I have published the website to Amazon S3 using static website hosting with Amazon CloudFront as CDN, however, the behavior of the published app is exactly the same as described local behavior</p>
  
  <p>To expand on the questions:</p>
  
  <p><strong>Question 1 expanded:</strong></p>
  
  <p>When the page says "Authorizing..." I only get the described error in the console, the Cognito hosted UI is not rendered, only when I click on "Log in" I am either redirected (with major delay) to Cognito hosted UI, or authenticated without redirection (if I signed in before), perhaps this GIF will clear things up:</p>
  
  <p><img src="https://thumbs.gfycat.com/MeatyRemoteEyelashpitviper-size_restricted.gif" alt="blazor/cognito weird behavior"></p>
  
  <p>I might be wrong, but isn't the problem that the <strong>Cognito hosted UI is rejecting to be rendered in an iframe</strong>? Can my app redirect to the hosted UI in the first place, like it eventually does? Right now I have to wait while <code>X-Frame-Options</code> error is thrown, click on "Log in", wait while another <code>X-Frame-Options</code> error is thrown, and then finally I'm redirected and the flow succeeds (in the gif the UI doesn't show up because I authenticated before in the session)</p>
  
  <p><strong>Question 2 expanded:</strong></p>
  
  <p>The behavior I want to achieve is that if the user is not authenticated, they cannot see any part of the application, instead they are redirected to Cognito hosted UI and only after they are authenticated they can see anything. I tried to play around with <code>Authorize</code> attribute in <code>MainLayout.razor</code>, but the result is always a blank screen, I would like to provide some code and details but I believe the behavior is impacted by errors described in <strong>Question 1</strong>, which is why I would like to sort it out first</p>