bsvveen/react-openidconnect

Simple React OpenIdConnect component

react-openidconnect's Issues

Objects are not valid as react child

i am currently using react with typescript. It currently works in all other browsers except for IE 11. It throws error as:
"Objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner}). If you meant to render a collection of children, use an array instead." the code that i have is:

import React, { useState, useEffect } from "react";
import $ from "jquery";
import { default as OidcSettings } from "../../oidcsettings.json";
import { useDispatch, connect } from "react-redux";
import { getlogin } from "../../redux/login/action";
import { RootReducerState } from "../../redux/rootReducer";
import { loginState } from "../../redux/login/reducer";
import { useHistory } from "react-router-dom";

import Authenticate from "react-openidconnect";
// const Authenticate = require("react-openidconnect");

interface Props {
loginState: loginState;
}

const Login = ({ loginState }: Props) => {
const { isLoggedIn } = loginState;
const history = useHistory();
const [user, setUser] = useState(undefined);
const dispatch = useDispatch();

function userLoaded(user: any) {
if (user) setUser(user);
}

function userUnLoaded() {
setUser(undefined);
}

// @note This function is optional. If you not pass it will looks for "#id_token" in the URL
function checkAuthentication() {
return window.location.href.includes("code");
}

function NotAuthenticated() {
if (OidcSettings.autoLogin && !window.location.href.includes("code")) {
setTimeout(() => {
let ele = $("#btn");
ele.click();
});

  return <div id="btn"></div>;
} else if (
  OidcSettings.autoLogin &&
  window.location.href.includes("code")
) {
  return <div id="btn"></div>;
} else {
  return (
    <div className="banner">
      <div className="banner-content">
        <h3>
          Welcome to <img src="images/logo/ncell-logo.png" />
        </h3>
        <button id="btn" className="btn btn-primary">
          <i className="fa fa-sign-in"></i>Log in
        </button>
      </div>
    </div>
  );
}

}

useEffect(() => {
if (window.location.href.includes("code")) {
let code = window.location.href.split("=")[1].split("&")[0];

  login(code);
}

}, []);

function login(code: string) {
// evt.preventDefault();
// let { username, password } = this.state;
dispatch(getlogin("username", "password", code));
return false;
}

return (

If you see this you are authenticated.

);
};

const mapStateToProps = (state: RootReducerState) => {
return {
loginState: state.loginReducer,
};
};

export default connect(mapStateToProps)(Login);

can you think of any possible reason that why it is throwing error in IE only??

Adding support for typescript

Hello,
Nice project! Do you plan to add support for typescript soon or later ?
Thanks in advance.

userLoaded not called

I'm using an identity OAUTH server that returns an access_token. is this why userLoaded is not getting called? If not, any ideas why this isn't called?

Is there a way to bypass renderNotAuthenticated ?

Hi,

Is there a way to invoke the authentication redirect without displaying the message and user click on the div specified for renderNotAuthenticated?

Thanks,

Opensource license

Hi- Please could you confirm under which Opensource license is this code available?

Thank you, Neha Sompura