I have a blazor webassembly application that implements authentication using Azure Active Directory. Everything works fine.
Now I need to change the base URI of the application from / to /app. I did that following the steps here.
Doing the above broke the authentication flow. Now the application is stuck in this url https://localhost:7105/app/authentication/login?returnUrl=https%3A%2F%2Flocalhost%3A7105%2Fapp.
Looking in the console I found the following stack :
Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
Unhandled exception rendering component: Invalid return url. The return url needs to have the same origin as the current page.
System.InvalidOperationException: Invalid return url. The return url needs to have the same origin as the current page.
at Microsoft.AspNetCore.Components.WebAssembly.Authentication.RemoteAuthenticatorViewCore`1[[Microsoft.AspNetCore.Components.WebAssembly.Authentication.RemoteAuthenticationState, Microsoft.AspNetCore.Components.WebAssembly.Authentication, Version=6.0.3.0, Culture=neutral, PublicKeyToken=adb9793829ddae60]].GetReturnUrl(RemoteAuthenticationState state, String defaultReturnUrl)
at Microsoft.AspNetCore.Components.WebAssembly.Authentication.RemoteAuthenticatorViewCore`1.<OnParametersSetAsync>d__82[[Microsoft.AspNetCore.Components.WebAssembly.Authentication.RemoteAuthenticationState, Microsoft.AspNetCore.Components.WebAssembly.Authentication, Version=6.0.3.0, Culture=neutral, PublicKeyToken=adb9793829ddae60]].MoveNext()
at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()
It says the return url is invalid. I can't figure out where this return url is set and what to change it for.
Thanks to #TinyWang for pointing to the github issue. The workaround was to append a "/" at the end of the return url:
var uri = Navigation.Uri;
if (uri.EndsWith("/app")) uri += "/";
Navigation.NavigateTo($"authentication/login?returnUrl={Uri.EscapeDataString((uri))}");
To add my two cents, since in this case the return url is the landing page of the app, this works fine too:
Navigation.NavigateTo($"authentication/login?returnUrl={Uri.EscapeDataString(Navigation.BaseUri)}");
Related
I have a react app that's deployed that has multiple routes for different purposes. If I want to send a link to someone with a route (domain.com/route) it just redirects to the root url of domain.com.
I think it's something to do with SPAs in general, but I can't figure out what to add or where to add. Is it an issue with DNS? My site is deployed on Digital Ocean, but my domain is from google and it redirects from a subdomain (app.domain.com) so maybe that's the issue.
I had a similar issue with a different react app and I was able to fix it by adding this to my index.html:
<!-- Start Single Page Apps for GitHub Pages -->
<script type="text/javascript">
// Single Page Apps for GitHub Pages
// MIT License
// https://github.com/rafgraph/spa-github-pages
// This script checks to see if a redirect is present in the query string,
// converts it back into the correct url and adds it to the
// browser's history using window.history.replaceState(...),
// which won't cause the browser to attempt to load the new url.
// When the single page app is loaded further down in this file,
// the correct url will be waiting in the browser's history for
// the single page app to route accordingly.
(function (l) {
if (l.search[1] === "/") {
var decoded = l.search
.slice(1)
.split("&")
.map(function (s) {
return s.replace(/~and~/g, "&");
})
.join("?");
window.history.replaceState(
null,
null,
l.pathname.slice(0, -1) + decoded + l.hash
);
}
})(window.location);
</script>
<!-- End Single Page Apps for GitHub Pages -->
But it still redirects from domain.com/route to app.domain.com without the route, which makes me think it's because of the app..
EDIT: However when I do app.domain.com/route it works, so I think the issue is with domain.com always redirecting to app.domain.com because of the way I set up my DNS. Which sort of changes the question, but I still don't know why that happens.
I would like my backend to serve up my front end (which is written in react). I added the following cade to program.cs:
var frontEndBuildDirectory = "Path to front end build directory";
app.UseFileServer(new FileServerOptions()
{
FileProvider = new PhysicalFileProvider(frontEndBuildDirectory ),
RequestPath = ""
});
My understanding is that this code does two things:
If a request's url starts with the host name of my backend (localhost:xyzw), everything following the host name will be a virtual path into frontEndBuildDirectory.
When a request is made into frontEndBuildDirectory (the directory itself, not a file within the directory), then the response is the index.html file within frontEndBuildDirectory.
The problem is that my react code uses the react-router library. If I make a request to the backend (localhost:xyzw), the front end is served. Then when I click on something that changes the route (using react router), the url changes to localhost:xyzw/route1 and the everything works. However, if I try to search up localhost:xyzw/route1, I get a page not found error.
My understanding is that this happens because there is no file named route1 in frontEndBuildDirectory.
What is the proper way to make requests like localhost:xyzw/route1 not give a page not found error?
I work with spring boot, thymeleaf, spring security and angularjs
I want all url invalid to return to the home page.
The login page is managed by thymeleaf and the rest by angularjs
So i used a #Controller to forward all invalid url to the localhost:8080/:
#Controller
public class AccueilController {
// Match everything without a suffix (so not a static resource)
#RequestMapping(value = "/{path:[^\\.]*}")
public String redirect() {
// Forward to home page so that route is preserved.
return "forward:/";
}
}
when connecting if I type localhost:8080/XXXXthat forward me to the racine after login but if I type localhost:8080/XXXX/XXXX that give me a 404 error
after connection I don't have that problem because Angular forward all url correctly.
That's not the default behavior of the web applications. I sugest you to customize the not found page (Spring Boot and custom 404 error page) and then from there create a link to your home;
I have problem. I try to connect with Gmail API from my MVC application. On my local machine all works fine but when I deploy application to IIS I get 404 error. It is caused by redirect application to "http://localhost/AuthCallback/IndexAsync" address when the correct is "http://localhost/myApplicationName/AuthCallback/IndexAsync".
Can I change default redirect url?
I get error after user authorization.
I'm using Google.Apis Version 1.9.1.12395 and GoogleApis.Gmail.v1 version 1.9.0.31.
Ok, I resolve problem. I had to override parameter in class AppFlowMetadata
public override string AuthCallback
{
get
{
return #"/ApplicationName/AuthCallback/IndexAsync";
}
}
I am using server side google oauth in angular.js,
Suppose my redirect url is localhost:8000/redirect. To remove # in angularjs I am using
$locationProvider.html5Mode(true);
But, when i visit the url I get an error :
Error response
Error code 404.
Message: File not found.
Error code explanation: 404 = Nothing matches the given URI.
However if I type the url manually i.e localhost:8000/#redirect then I get what I expected and then redirects to localhost:8000/redirect
I have also tried to add # from Google app console. But, that is not allowed.
So how to remove hash completely ?