authts/react-oidc-context

signinRedirect() does nothing, signinPopup() immediately closes

olsonjeffery opened this issue · 2 comments

I searched open/closed issues and didn't see this, so I want to see if anyone else has encountered this.

Using oidc-client-ts 3.0.1 and react-oidc-context 3.0.0. Running keycloak 23.0.7.

The webapp and keycloak instance are different paths under one hostname with nginx in-front of both. (/auth for KC and /webapp)

I believe I have the config setup correctly, because after signinRedirect() is invoked I see the .well-known/openid-configuration endpoint get called and return a well-formed response. But after that, nothing. As mentioned in the title, I also tried signinPopup() and it opens/closes immediately with no apparent content. AFAIK the webapp client is set up correctly on the Keycloak side, I have a login theme setup and the browser flow is configured, etc.

Any ideas? Need more info? Thanks in advance.

Per #809 , I will show my SigninButton component that encapsulates this:

import { useAuth } from "react-oidc-context";

function SignInButton() {
    const auth = useAuth();
    const isSignedIn = auth.isAuthenticated;

    return isSignedIn ? (
        <a onClick={() => void auth.removeUser()} title="Log out" className="button is-primary is-light is-desktop-icon-only">
        <span className="icon"><i className="mdi mdi-logout"></i></span>
        <span>Log out</span>
        </a>
    ) : (
        <a onClick={() => void auth.signinRedirect()} title="Sign in" className="button is-primary is-desktop-icon-only">
        <span className="icon"><i className="mdi mdi-login"></i></span>
        <span>Sign in</span>
        </a>
    );
}

export default SignInButton;

nvm I debugged it by looking at auth.error.message after calling auth.signinRedirect:

 Crypto.subtle is available only in secure contexts (HTTPS).