Wrong URI google OAuth authentication

Question

I'm having a lot problems with OAuth in Google. I have 2 apps deployed in Azure (front in react, and backend in Play (scala)). Let's suppose we can find:

• backend at: "backend.azure.net",
• frontend at: "frontend.azure.net".

I use Silhouette in my backend app.

My SocialAuthController :

class SocialAuthController @Inject()(scc: DefaultSilhouetteControllerComponents, addToken: CSRFAddToken)(implicit ex: ExecutionContext) extends SilhouetteController(scc) {

  def authenticate(provider: String): Action[AnyContent] = addToken(Action.async { implicit request: Request[AnyContent] =>
    (socialProviderRegistry.get[SocialProvider](provider) match {
      case Some(p: SocialProvider with CommonSocialProfileBuilder) =>
        p.authenticate().flatMap {
          case Left(result) => Future.successful(result)
          case Right(authInfo) => for {
            profile <- p.retrieveProfile(authInfo)
            res <- userRepository.getByEmail(profile.email.getOrElse(""))
            user <- if (res == null) userRepository.create(profile.loginInfo.providerID, profile.loginInfo.providerKey, profile.email.getOrElse(""))
            else userRepository.getByEmail(profile.email.getOrElse(""))
            _ <- authInfoRepository.save(profile.loginInfo, authInfo)
            authenticator <- authenticatorService.create(profile.loginInfo)
            value <- authenticatorService.init(authenticator)
            result <- authenticatorService.embed(value, Redirect(s"https://backend.azure.net?user-id=${user}"))
          } yield {
            val Token(name, value) = CSRF.getToken.get
            result.withCookies(Cookie(name, value, httpOnly = false))
          }
        }
      case _ => Future.failed(new ProviderException(s"Cannot authenticate with unexpected social provider $provider"))
    }).recover {
      case _: ProviderException =>
        Forbidden("Forbidden")
    }
  })
}

My routes:

# Authentication

POST        /signUp                                   controllers.SignUpController.signUp

POST        /signIn                                   controllers.SignInController.signIn

POST        /signOut                                  controllers.SignInController.signOut
GET         /authenticate/:provider        controllers.SocialAuthController.authenticate(provider: String)

silhouette.conf (google part):

# Google provider
      google.authorizationURL="https://accounts.google.com/o/oauth2/auth"
      google.accessTokenURL="https://accounts.google.com/o/oauth2/token"
      google.redirectURL="https://backend.azure.net/authenticate/google"
      google.clientID="my_id"
      google.clientSecret="my_secret"
      google.scope="profile email"

So as you see i paste token to the link in Redirect(s"http://backend.azure.net?user-id=${user}")).

My js function in frontend app:

export function signInGoogle() {
    const host = "https://backend.azure.net/"
    const route = "authenticate/google";
    const requestOptions = {
        method: 'GET',
        headers: { 'Content-Type': 'application/json' },
        credentials: 'include',
        mode: 'cors',
    };
    return fetch(host + route, requestOptions)
}

And function with redirect

export default function GoogleSignIn() {

    const responseGoogle = () => {
        window.location.href = "https://backend.azure.net/authenticate/google";
    }

    return (
        <div>
            <button onClick={responseGoogle}
                    className="add-to-cart-button register-bttn ingsoc ggl-bttn"> Login With Google </button>
        </div>
    )
}

If you click login with google the second function is called.

On my google dev account I have some links. My URI Identificators: https://backend.azure.net and http://front.azure.net

and authorized URI Redirect: http://backend.azure.net/authenticate/google

After I click "login with google" I get 403 forbidden on site and 3 exceptions in console :

1 GET https://uj-ebiznes-back.azurewebsites.net/authenticate/google?state=very_long_link 403 (Forbidden)

Unchecked "long link on back " runtime.lastError: Could not establish connection. Receiving end does not exist.

Error handling response: "very long link to backend/authenticate/google"
TypeError: Cannot destructure property 'yt' of 'undefined' as it is undefined.
    at chrome-extension://cmedhionkhpnakcndndgjdbohmhepckk/scripts/contentscript.js:535:6

Could someone explain what is wrong here? I have no idea and I tried everything.