OAuth 2.0 Implicit flow with React without a backend

Question

I'm trying to connect to a service using OAuth 2.0 implicit flow, the way I'm doing it, is that I'm checking the URL of the newly opened window to see if it contains the access token, but I get this error

SecurityError: Blocked a frame with origin "http://localhost:3000" from accessing a cross-origin frame.

Which kind of makes sense, but I don't know of any other way to do it.

I've also tried using window.location to get the url, same result though

Do you have any idea what I'm doing wrong ?

Here is my code :

import React from "react";
import { connect } from "react-redux";

import { Login } from "./actions";

class Connection extends React.Component {
  constructor(props) {
    super(props);

    this._logIn = this.logIn.bind(this);
  }

  checkPopup() {
    const check = setInterval(() => {
      const { popup } = this;
      console.log(popup.location)
      if (!popup || popup.closed || popup.closed === undefined) {
        clearInterval(check);
        this.props.Login("RESET");
      } else if (popup.document.url.includes("access_token")) {
        let url = popup.document.url;
        console.log(url);
        let token = url.substring(
          url.indexOf("#access_token=") + 14,
          url.indexOf("&state")
        );
        console.log(token);
        this.props.Login("SUCCESS", token);
      }
    }, 100);
  }

  logIn() {
    const width = 600,
      height = 600;
    const left = window.innerWidth / 2 - width / 2;
    const top = window.innerHeight / 2 - height / 2;

    const url = "****";
    const clientId = "****";
    const redirect = "http%3A%2F%2F127.0.0.1:3000";
    const state = Math.floor(Math.random() * Math.floor(10000000));

    const generatedUrl = `${url}?response_type=token&client_id=${clientId}&redirect_uri=${redirect}&scope=voice&state=${state}`;

    this.popup = window.open(
      generatedUrl,
      "",
      `toolbar=no, location=no, directories=no, status=no, menubar=no, 
    scrollbars=no, resizable=no, copyhistory=no, width=${width}, 
    height=${height}, top=${top}, left=${left}`
    );

    this.checkPopup();
  }

  render() {
    return (
      <Modal show={true}>
        <Modal.Card>
          <Modal.Card.Body>
            <Heading>Test</Heading>
          </Modal.Card.Body>
          <Modal.Card.Foot>
            <p href="" className="link" onClick={this._logIn}>
              Log in
            </p>
          </Modal.Card.Foot>
        </Modal.Card>
      </Modal>
    );
  }
}

const mapStateToProps = state => {
  return {
    error: state.connection.error
  };
};

const mapDispatchToProps = { Login };

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Connection);