Wrong URI google OAuth authentication - azure

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.