Microsoft Teams Tab Uncaught DOMException: Blocked a frame with origin from accessing a cross-origin frame

Question

I develop my Teams Application in React and hosted on Azure App server. The backed for the application is an external party which has oauth2 flow. When I test my code in Teams, I can see the login screen from Backend, but after entering user name and password, it starts throwing below error:

Uncaught DOMException: Blocked a frame with origin "https://backend-External-Server.com" from accessing a cross-origin frame.

I am really stuck on this one. My react application really works well, even in Teams if I have access token already. All the rest api calls works perfect. Problem occurs after login screen appears. I am using Teams Toolkit to create the Tab and coded the authentication part in React.

Login Page code:

import React from "react";
import "./Login.css";
import { Authentication } from "../app/services/AuthService/auth";

export default function Login() {
  const auth = new Authentication();
  return <div className="center-screen">
    <div className="row">
      <span className="column">You'll need to sign in to use this app.</span>      
    </div>
    <div className="row">
      <span className="column"> <input type="button" value="Sign in" className="button" onClick={() => window.open(auth.getLoginUrl(), '_self')} /> </span>
    </div>
  </div>;
}

AppRedirect Code:

import React, { ReactElement } from "react";
import { useState, useEffect } from "react";
import { Authentication } from "../app/services/AuthService/auth";
import Tab from './Tab';
import NoAccess from './NoAccess';
import { Redirect } from "react-router-dom";
import Spinner from "../app/services/Common/spinner";

export default function AppRedirect() {  
 let auth: Authentication = new Authentication();
 const [valid, setValid] = useState(false);
 
 useEffect(() => {
  if (!valid) {
      getToken();
  }
}, []);

const getToken = async () => {
    var valid = await auth.redirectCallBack();
    setValid(valid);
  };
  
  return <div> {valid ?  <Redirect to={auth.PathToRedirect} /> : <div><Spinner/></div> }</div>; 

}