BUG Google OAuth giving redirect mismatch error

[qisforq]

Fixed locally, not sure why it's still not working in production.

Current config in credentials > OAuth 2.0 Client IDs: AthletiFi Dashboard > Client ID for Web application:

Current config in Oauth consent screen > AthletiFi- Edit App > Edit app registration:

[qisforq]

This issue is FINALLY solved 🎉🎉

The primary issue was due to discrepancies between the redirectSignIn and redirectSignOut URLs configured in Amplify and the actual domain used by the application. Our application is technically hosted on www.athleti.fi, and there is a redirect in place such that accessing athleti.fi automatically redirects to www.athleti.fi. But that redirect isn't taken into account for Oauth apparently, which is why there was a mismatch in the OAuth flow when the URLs did not include www.

Thanks to @chef-louis's observation related to the SEO issue, we determined that changes we made to the code were not being reflected when deployed into production, likely due to caching mechanisms we had implemented. To force a complete rebuild from scratch, we reconfigured the Amplify deployment by disconnecting the previous connection to the main branch. We then created a new branch named prod and connected it to Amplify. This ensured that updates were correctly deployed and configurations were accurately reflected.

I also had to update the configuration files. The use of amplifyconfiguration.json is actually not intended for next.js projects (it's intended for flutter and mobile apps). So I switched to using aws-exports.js to ensure consistent configuration management by Amplify. I also created a custom configuration file, custom-aws-exports.js, originally to hardcode the redirect urls because they kept being overwritten after every deployment.

awsExports.oauth.redirectSignIn = 'https://www.athleti.fi/resolve-auth/';
awsExports.oauth.redirectSignOut = 'https://www.athleti.fi/logout/';

However, since this issue was actually likely due to the caching issue, I ended up taking those lines out. But Amplify didn't seem to have a built in way to handle custom Oauth domains, so I kept this file to dynamically handle the connection to auth.athleti.fi for OAuth, adding this line:

awsExports.oauth.domain = 'auth.athleti.fi';

Final Note: For any future changes, we have the option to override configurations by adding them into the custom-aws-exports.js file.