How to set 'redirect_uri' for Identity Server 4 in a React JS app and point to one of the views using route?

Question

I followed this - http://docs.identityserver.io/en/release/quickstarts/7_javascript_client.html.

Using the following configuration, I tried to login Identity Server from my ReactJS app. http://localhost:3000/callback.html is loaded after successful login. I got id_token and access_token in the url. But, I am sure this callback.html is not the 'src\callback.html' which I have in the folder structure. Even if I delete the 'src\callback.html' file, http://localhost:3000/callback.html#id_token=....... is still loaded. May I know how to change the redirect_uri to a view in my React app (for example Home.js rather than an html file)? I hope I should use route for this. Please advise.

var config = {
      authority: "http://localhost:5000",
      client_id: "reactSpa",
      redirect_uri: "http://localhost:3000/callback.html", // I want it to be something like 'http://localhost:3000/components/home' (a view not an html)
      response_type: "id_token token",
      scope: "openid profile api1",
      post_logout_redirect_uri: "http://localhost:3000/index.html", // same here
    };

PS:

I need to set the redirect_uri and post_logout_redirect_uri to any of the views in my React app (not html files) so that I can do the following operation in my Callback view.

new Oidc.UserManager().signinRedirectCallback().then(function () {
            window.location = "index.html"; // should be just 'index'
        }).catch(function (e) {
            console.error(e);
        });

adem caglin · Answer 1 · 2018-08-13T12:38:09.683

0

First, you need to change client's RedirectUris on identityserver side. I don't know which storage you use but if you use in memory clients here is a sample from official docs:

var jsClient = new Client
{
    ClientId = "js",
    ClientName = "JavaScript Client",
    ClientUri = "http://identityserver.io",

    AllowedGrantTypes = GrantTypes.Implicit,
    AllowAccessTokensViaBrowser = true,

    RedirectUris =           { "http://localhost:7017/index.html" },
    PostLogoutRedirectUris = { "http://localhost:7017/index.html" },
    AllowedCorsOrigins =     { "http://localhost:7017" },

    AllowedScopes =
    {
        IdentityServerConstants.StandardScopes.OpenId,
        IdentityServerConstants.StandardScopes.Profile,
        IdentityServerConstants.StandardScopes.Email,

        "api1", "api2.read_only"
    }
};

And also you need to change redirect_uri appropriately on client side config(it must be same as identityserver).

edited Aug 13 '18 at 12:38

answered Aug 12 '18 at 19:04

adem caglin

22,700
10
58
78

I have already set the redirect uri both in IdentityServer and React Client. It is actually working for me. When I login and it goes to the redirect_uri, it gets the id_token and access_token as well. What my problem is, on successful login and when it goes to the redirect_uri as follows http://localhost:3000/callback.html#id_token=....... - this callback.html does not point to any of the files/views in my React app. I need to set the redirect_uri and post_logout_redirect_uri to any of the views in my React app (not html files). – MAK Aug 13 '18 at 02:30
Did you try to change redirect_uri on identityserver config to `http://localhost:7017/callback` and create a `Callback` component with route configuration(like ``)? – adem caglin Aug 13 '18 at 06:26
Yes. It worked after I added Route. Thank you. Please post this comment as answer. Let me accept that as answer. – MAK Aug 14 '18 at 19:31

score 0 · Answer 2 · answered Sep 20 '18 at 05:40

0

The following comment is the answer:

//Did you try to change redirect_uri on identityserver config to http://localhost:7017/callback and create a Callback component with route configuration(like )? – adem caglin//

It worked after I added Route.

answered Sep 20 '18 at 05:40

MAK

1,915
4
20
44

How to set 'redirect_uri' for Identity Server 4 in a React JS app and point to one of the views using route?

2 Answers2