How to setup OAuth properly

[altear147]

According to this article
https://fusionauth.io/docs/lifecycle/authenticate-users/identity-providers/social/google.

I create Google credentials as this image

[Please repost image]

the first hidden is my web app url.
and the second section hidden is redirected url to my backend service.

then create identity provider as this image

[Please repost Image]

and declare function to login and redirect like this

@Get("oauth/login")
async login(@Req() req: Request, @Res() res: Response) {
const fusionAuthURL = ${process.env.FUSIONAUTH_ISSUER}/oauth2/authorize?client_id=${process.env.FUSIONAUTH_CLIENT_ID}&redirect_uri=${process.env.FUSIONAUTH_REDIRECT_URI}&response_type=code&scope=openid email profile;
return res.redirect(fusionAuthURL);
}

@Get("oauth/callback")
async callback(@Req() req: Request, @Res() res: Response) {
const user = req.user;
return res.redirect(${process.env.FRONTEND_URL});
}

after build and deploy FusionAuth, my web app and backend service I saw login with google button at the Fusionauth admin page.

I try to login with that button, and the error dialog show me that my client id is invalid.

I try to send redirect request from my web app to backend service with the function I mentioned above
it didn't work as well.

May you direct me what I was missing or misunderstanding or what I need to clarify.

thank you in advance.

[mark.robustelli]

@altear147 Would you mind please reposting the images. I removed them as I felt with a little work some of the private information would have been revealed with them. Please completely block the secret information.

[mark.robustelli]

@altear147 is the error referring to the FusionAuth application client id or the Google Client Id? Is the error coming form FusionAuth or Google?

[altear147]

@mark-robustelli
here, the identity provider page and credential page.

the error dialog said the client id is invalid,
I copied the id and secret from the credential page, so I'm pretty sure that there is no error like missing some character or having more character.

and here the error dialog that I mentioned

[mark.robustelli]

@altear147 Can you please give the full text (minus any secrets) of the error?

[altear147]

@mark-robustelli

{
"error" : "invalid_client",
"error_description" : "client_id: {secret}.apps.googleusercontent.com is not valid.",
"error_reason" : "invalid_client_id"
}

[mark.robustelli]

@altear147 can you try to use application Id of the application in FusionAuth for the client_id instead of the google client id and see if that works?

[altear147]

@mark-robustelli

oh, I changed client id in identity provider to app id,

the error dialog still the same error

{
"error" : "invalid_client",
"error_description" : "client_id: {"still be google client id not app id"}apps.googleusercontent.com is not valid.",
"error_reason" : "invalid_client_id"
}

it seems the id that was shown in the error dialog
is from the web service controller "process.env.FUSIONAUTH_CLIENT_ID"

@Get("oauth/login")
async login(@Req() req: Request, @Res() res: Response) {
const fusionAuthURL = ${process.env.FUSIONAUTH_ISSUER}/oauth2/authorize?client_id=${process.env.FUSIONAUTH_CLIENT_ID}&redirect_uri=${process.env.FUSIONAUTH_REDIRECT_URI}&response_type=code&scope=openid email profile;
return res.redirect(fusionAuthURL);
}

but in credential page isn't complicated.

anyway, I did enable and attemp to login from fusion auth admin page

and got this error.

[mark.robustelli]

@altear147 OK, let's try this. Go into the FusionAuth AdminUI.

Go to Applications
Find your application
select View
find the OAuth2 & OpenID Connect Integration details section
copy the OAuth IdP login URL

use that for the value of the url. Let me know if that works.

[altear147]

@mark-robustelli
Hi thank you for replying, and sorry for away a few days due to my group shut down the service during weekend and night time.

I try using url from this "OAuth IdP login URL", as a login function

@Get("oauth/login")
async login(@Req() req: Request, @Res() res: Response) {
const fusionAuthURL = ${process.env.FUSIONAUTH_ISSUER}/oauth2/authorize?client_id=1133784f-7f6e-4eda-a33b-7fd1164f6509&response_type=code&redirect_uri=${"my redirect url"};
return res.redirect(fusionAuthURL);
}

but it returns me
{
"error" : "invalid_request",
"error_description" : "Invalid redirect_uri {my redirect url},
"error_reason" : "invalid_redirect_uri"
}

PS. I replaced the direct url as a "my redirect url".

the value of my direct url is a url path that request to this

@Get("oauth/callback")
async callback(@Req() req: Request, @Res() res: Response) {
const user = req.user;

// skip access token

// res.cookie("token", jwtToken, { httpOnly: true });

return res.redirect(`${process.env.FRONTEND_URL}`);

}

[mark.robustelli]

@altear147 OK, it looks like the redirect_uri does not match what is configured in the application. Can you make sure you are supplying the correct uri?

This can be found under: Applications -> Edit -> OAuth tab

[altear147]

@mark-robustelli

redirect url is valid now, it takes me to this login page again, expect flow is using google oauth flow, but we made a progress.

[altear147]

as I replied earlier I add redirect uri in FusionAuth console and invalid_redirect_uri is gone.

and this moment still get this error using Google Oauth flow.

I replaced redirect uri "https://mydomain/callback" as I did in Fusionauth admin console but still get the same error.

[mark.robustelli]

@altear147 looks like you are getting closer. If I go back to your screenshot of the provider configuration page, it looks like the scope input box is empty. Three common scopes to include are email, profile, and openid.. Please add the correct scope(s) and let me know if that works for you.

[altear147]

@mark-robustelli

is this what you mentioned?

I had added it a few days ago and it shows me this error

Actually, we made a progress since a few days ago the error said I need to define scope.

[altear147]

@mark-robustelli

and to be clear, the error dialog I posted above was from fusionauth admin console

but if I call the request to this function

@Get("oauth/login")
async login(@Req() req: Request, @Res() res: Response) {
const fusionAuthURL = ${process.env.FUSIONAUTH_ISSUER}/oauth2/authorize?client_id={secret}&response_type=code&redirect_uri=${"my redirect url"};
return res.redirect(fusionAuthURL);
}

it still returns me
{
"error" : "invalid_client",
"error_description" : "client_id: {secret} is not valid.",
"error_reason" : "invalid_client_id"
}

[mark.robustelli]

@altear147 Thanks for taking the time to work with this. It is generally a pretty straight forward process taking no more than 5 minutes. I am out of the office this week, but will try to get some time to replicate what you are going through. I want to make sure I am working on the right thing, so just want to confirm that we have the same end goal. You want the 'Login with Google' button to work for an Application you created within FusionAuth, right?

[mark.robustelli]

@altear147 also did you grant these scopes in the google config?