FINDIT-161 Auth frontend #20
Conversation
WalkthroughGoogle Sign-In integration was added to the iOS app. This included updating configuration files, adding the Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant LoginBottomSheet
participant GoogleSignin
participant upsertUserMutation
participant Toast
User->>LoginBottomSheet: Tap "Sign in with Google"
LoginBottomSheet->>GoogleSignin: Configure and initiate sign-in
GoogleSignin-->>LoginBottomSheet: Return sign-in response
alt Success
LoginBottomSheet->>upsertUserMutation: Upsert user with Google profile data
else Cancelled or Error
LoginBottomSheet->>Toast: Show cancellation or error message
end
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
components/LoginBottomSheet.tsxOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-import". (The package "eslint-plugin-import" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-import" was referenced from the config file in ".eslintrc.js » eslint-config-expo » ./utils/core.js". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. Note Free review on us!CodeRabbit is offering free reviews until Wed May 28 2025 to showcase some of the refinements we've made. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
0 New Issues
0 Fixed Issues
0 Accepted Issues
|
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
bun.lockis excluded by!**/*.lock
📒 Files selected for processing (5)
.gitignore(1 hunks)GoogleService-Info.plist(1 hunks)app.json(3 hunks)components/LoginBottomSheet.tsx(5 hunks)package.json(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: EAS Update
🔇 Additional comments (5)
package.json (1)
29-29:Details
✅ Verification successful
Verify that the Google Sign-In package version is current and secure.
The added dependency looks correct for implementing Google authentication. However, ensure this is the latest stable version and check for any security advisories.
🏁 Script executed:
#!/bin/bash # Check the latest version and security advisories for the Google Sign-In package echo "Checking latest version of @react-native-google-signin/google-signin..." npm view @react-native-google-signin/google-signin version echo -e "\nChecking for security advisories..." npm audit --audit-level moderate --only=prod --package-lock-only 2>/dev/null || echo "No package-lock.json found for audit" # Alternative check using GitHub API for known vulnerabilities gh api graphql -f query=' { securityVulnerabilities(first: 5, ecosystem: NPM, package: "@react-native-google-signin/google-signin") { nodes { advisory { summary severity publishedAt } vulnerableVersionRange firstPatchedVersion { identifier } } } }' 2>/dev/null || echo "GitHub CLI not available for vulnerability check"Length of output: 832
Dependency version verified: @react-native-google-signin/google-signin
The added version (^14.0.1) matches the latest published release and no known security advisories were found. Good to merge.
.gitignore (1)
47-51: LGTM! Proper exclusion of sensitive Google service configuration files.Excellent practice to exclude the Google service configuration files from version control, as these contain sensitive client IDs and authentication details. The formatting improvement with the newline is also appropriate.
GoogleService-Info.plist (1)
1-14:Details
✅ Verification successful
Verify the configuration values and ensure proper security practices.
The plist structure is correct for Google services integration. However, please ensure:
- The CLIENT_ID and REVERSED_CLIENT_ID are correctly configured in your Google Cloud Console
- The BUNDLE_ID (
pt.findit.clientapp) matches your app's bundle identifier consistently- This file is properly excluded from version control (which it is via .gitignore)
🏁 Script executed:
#!/bin/bash # Verify the bundle ID consistency across configuration files echo "Checking bundle ID consistency..." echo "app.json iOS bundle identifier:" cat app.json | jq -r '.expo.ios.bundleIdentifier' echo -e "\nGoogleService-Info.plist BUNDLE_ID:" if command -v plutil &> /dev/null; then plutil -p GoogleService-Info.plist | grep -A1 "BUNDLE_ID" else grep -A1 "BUNDLE_ID" GoogleService-Info.plist fi echo -e "\nVerifying the reversed client ID format..." grep -o "com\.googleusercontent\.apps\.[^<]*" GoogleService-Info.plist || echo "Reversed client ID not found in expected format"Length of output: 679
🏁 Script executed:
#!/bin/bash echo "Checking if GoogleService-Info.plist is excluded in .gitignore..." if [ -f .gitignore ]; then grep -n "GoogleService-Info.plist" .gitignore && echo "Found in .gitignore" if ! grep -q "GoogleService-Info.plist" .gitignore; then echo "GoogleService-Info.plist is NOT listed in .gitignore" fi else echo ".gitignore not found in repository root" fiLength of output: 333
GoogleService-Info.plist configuration verified.
All checks are green:
- CLIENT_ID and REVERSED_CLIENT_ID follow the expected Google Cloud formats
- BUNDLE_ID (
pt.findit.clientapp) matches the value in app.json- GoogleService-Info.plist is properly excluded from version control
No further action required.
app.json (1)
18-19: LGTM! Proper Google services configuration for iOS.The
googleServicesFilereference is correctly configured to point to the Google services plist file.components/LoginBottomSheet.tsx (1)
123-123: LGTM! Simplified layout structure.The change from platform-dependent flex direction to a fixed column layout simplifies the code and provides consistent behavior across platforms.
| ], | ||
| "@maplibre/maplibre-react-native", | ||
| [ | ||
| "@react-native-google-signin/google-signin", | ||
| { | ||
| "iosUrlScheme": "com.googleusercontent.apps.742231570327-s21pt82lc97lc35obefgn5nrdq4m0rn6" | ||
| } | ||
| ] |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Remove duplicate plugin entry and verify URL scheme configuration.
There's a duplicate @maplibre/maplibre-react-native plugin entry that should be removed. The Google Sign-In plugin configuration looks correct, but ensure the iosUrlScheme matches your Google services configuration.
],
- "@maplibre/maplibre-react-native",
[
"@react-native-google-signin/google-signin",
{
"iosUrlScheme": "com.googleusercontent.apps.742231570327-s21pt82lc97lc35obefgn5nrdq4m0rn6"
}
]🏁 Script executed:
#!/bin/bash
# Verify the iOS URL scheme matches the reversed client ID from the plist
echo "Checking URL scheme consistency..."
echo "app.json iosUrlScheme:"
cat app.json | jq -r '.expo.plugins[] | select(type == "array" and .[0] == "@react-native-google-signin/google-signin") | .[1].iosUrlScheme'
echo -e "\nGoogleService-Info.plist REVERSED_CLIENT_ID:"
if command -v plutil &> /dev/null; then
plutil -p GoogleService-Info.plist | grep -A1 "REVERSED_CLIENT_ID"
else
grep -A1 "REVERSED_CLIENT_ID" GoogleService-Info.plist | grep -o "com\.googleusercontent\.apps\.[^<]*"
fiLength of output: 650
Remove duplicate @maplibre/maplibre-react-native plugin entry
The Google Sign-In iosUrlScheme has been verified against your REVERSED_CLIENT_ID in GoogleService-Info.plist and is correct.
• File: app.json (around lines 57–64)
• Remove the extra "@maplibre/maplibre-react-native" entry
],
- "@maplibre/maplibre-react-native",
[
"@react-native-google-signin/google-signin",
{
"iosUrlScheme": "com.googleusercontent.apps.742231570327-s21pt82lc97lc35obefgn5nrdq4m0rn6"
}
]📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| ], | |
| "@maplibre/maplibre-react-native", | |
| [ | |
| "@react-native-google-signin/google-signin", | |
| { | |
| "iosUrlScheme": "com.googleusercontent.apps.742231570327-s21pt82lc97lc35obefgn5nrdq4m0rn6" | |
| } | |
| ] | |
| ], | |
| [ | |
| "@react-native-google-signin/google-signin", | |
| { | |
| "iosUrlScheme": "com.googleusercontent.apps.742231570327-s21pt82lc97lc35obefgn5nrdq4m0rn6" | |
| } | |
| ] |
🤖 Prompt for AI Agents
In app.json around lines 57 to 64, there is a duplicate entry of the
"@maplibre/maplibre-react-native" plugin. Remove the extra occurrence of this
plugin to avoid redundancy. The Google Sign-In plugin configuration with the
iosUrlScheme is correct and does not require changes.
| const signIn = async () => { | ||
| try { | ||
| const signInResponse = await GoogleSignin.signIn(); | ||
| const userInfo = signInResponse.data?.user; | ||
| if (signInResponse.type === "success") { | ||
| await upsertUser({ | ||
| variables: { | ||
| model: { | ||
| email: userInfo?.email ?? "", | ||
| first_name: userInfo?.givenName ?? "", | ||
| last_name: userInfo?.familyName ?? "", | ||
| birth_date: "", | ||
| }, | ||
| }, | ||
| }); | ||
| } else if (signInResponse.type === "cancelled" || !userInfo) { | ||
| toast({ title: "Sign in cancelled", text: "Please try again." }); | ||
| return; | ||
| } | ||
| } catch (error) { | ||
| toast({ title: "Error signing in", text: error as string }); | ||
| } | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Improve error handling and add input validation.
The sign-in implementation looks good overall, but consider the following improvements:
- Error handling in the catch block should be more specific
- Add validation for required user fields before proceeding with upsert
const signIn = async () => {
try {
const signInResponse = await GoogleSignin.signIn();
const userInfo = signInResponse.data?.user;
if (signInResponse.type === "success") {
+ if (!userInfo?.email) {
+ toast({ title: "Error", text: "Email is required for sign in." });
+ return;
+ }
await upsertUser({
variables: {
model: {
email: userInfo?.email ?? "",
first_name: userInfo?.givenName ?? "",
last_name: userInfo?.familyName ?? "",
birth_date: "",
},
},
});
} else if (signInResponse.type === "cancelled" || !userInfo) {
toast({ title: "Sign in cancelled", text: "Please try again." });
return;
}
} catch (error) {
- toast({ title: "Error signing in", text: error as string });
+ console.error("Google Sign-In error:", error);
+ toast({
+ title: "Error signing in",
+ text: error instanceof Error ? error.message : "An unexpected error occurred. Please try again."
+ });
}
};📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const signIn = async () => { | |
| try { | |
| const signInResponse = await GoogleSignin.signIn(); | |
| const userInfo = signInResponse.data?.user; | |
| if (signInResponse.type === "success") { | |
| await upsertUser({ | |
| variables: { | |
| model: { | |
| email: userInfo?.email ?? "", | |
| first_name: userInfo?.givenName ?? "", | |
| last_name: userInfo?.familyName ?? "", | |
| birth_date: "", | |
| }, | |
| }, | |
| }); | |
| } else if (signInResponse.type === "cancelled" || !userInfo) { | |
| toast({ title: "Sign in cancelled", text: "Please try again." }); | |
| return; | |
| } | |
| } catch (error) { | |
| toast({ title: "Error signing in", text: error as string }); | |
| } | |
| }; | |
| const signIn = async () => { | |
| try { | |
| const signInResponse = await GoogleSignin.signIn(); | |
| const userInfo = signInResponse.data?.user; | |
| if (signInResponse.type === "success") { | |
| if (!userInfo?.email) { | |
| toast({ title: "Error", text: "Email is required for sign in." }); | |
| return; | |
| } | |
| await upsertUser({ | |
| variables: { | |
| model: { | |
| email: userInfo?.email ?? "", | |
| first_name: userInfo?.givenName ?? "", | |
| last_name: userInfo?.familyName ?? "", | |
| birth_date: "", | |
| }, | |
| }, | |
| }); | |
| } else if (signInResponse.type === "cancelled" || !userInfo) { | |
| toast({ title: "Sign in cancelled", text: "Please try again." }); | |
| return; | |
| } | |
| } catch (error) { | |
| console.error("Google Sign-In error:", error); | |
| toast({ | |
| title: "Error signing in", | |
| text: error instanceof Error | |
| ? error.message | |
| : "An unexpected error occurred. Please try again.", | |
| }); | |
| } | |
| }; |
🤖 Prompt for AI Agents
In components/LoginBottomSheet.tsx around lines 68 to 90, improve error handling
by checking if the caught error is an instance of Error and use its message
property for the toast instead of casting to string. Also, before calling
upsertUser, validate that required user fields like email, first_name, and
last_name are present and non-empty; if any are missing, handle this case
appropriately, such as showing a toast message and preventing the upsert call.
| useEffect(() => { | ||
| GoogleSignin.configure({}); | ||
| }, []); |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Configure Google Sign-In with proper parameters.
The GoogleSignin.configure({}) call is empty, which might not provide the necessary configuration for proper functioning. Consider adding required configuration parameters.
useEffect(() => {
- GoogleSignin.configure({});
+ GoogleSignin.configure({
+ webClientId: 'YOUR_WEB_CLIENT_ID', // From Google Cloud Console
+ offlineAccess: true, // If you want to access Google API on behalf of the user FROM YOUR SERVER
+ hostedDomain: '', // Specifies a hosted domain restriction
+ forceCodeForRefreshToken: true, // Force user to select account on each login
+ });
}, []);🌐 Web query:
What are the required configuration parameters for @react-native-google-signin/google-signin version 14.0.1?
💡 Result:
To configure @react-native-google-signin/google-signin version 14.0.1, you need to call the GoogleSignin.configure() method with the appropriate parameters. The required and optional configuration parameters are as follows:
Required Parameter:
webClientId: This is the client ID of type WEB obtained from the Google Cloud Console. It's essential for verifying the user's ID and enabling offline access.
Optional Parameters:
scopes: An array of strings specifying the Google API scopes your application requires. By default, it includesemailandprofile. For example:
scopes: ['https://www.googleapis.com/auth/drive.readonly']-
offlineAccess: A boolean indicating whether to request offline access. Set totrueif you need to access Google APIs on behalf of the user from your server. -
hostedDomain: A string specifying a hosted domain restriction. If set, authorization will be restricted to accounts within the specified domain. -
forceConsentPrompt: A boolean (Android only) that, when set totrue, forces the consent prompt to appear at each login. -
accountName: (Android only) A string specifying an account name on the device that should be used. -
iosClientId: (iOS only) The client ID of type iOS obtained from the Google Cloud Console. If not provided, it will be taken from theGoogleService-Info.plistfile. -
googleServicePlistPath: (iOS only) The path to theGoogleService-Info.plistfile if it has been renamed. -
openIdRealm: (iOS only) The OpenID2 realm of the home web server, allowing Google to include the user's OpenID Identifier in the OpenID Connect ID token. -
profileImageSize: (iOS only) The desired height and width of the profile image. Defaults to 120px.
Example Configuration:
import { GoogleSignin } from '@react-native-google-signin/google-signin';
GoogleSignin.configure({
webClientId: '<YOUR_WEB_CLIENT_ID>',
scopes: ['https://www.googleapis.com/auth/drive.readonly'],
offlineAccess: true,
hostedDomain: '',
forceConsentPrompt: true,
accountName: '',
iosClientId: '<YOUR_IOS_CLIENT_ID>',
googleServicePlistPath: '',
openIdRealm: '',
profileImageSize: 120,
});Ensure that you replace <YOUR_WEB_CLIENT_ID> and <YOUR_IOS_CLIENT_ID> with the actual client IDs obtained from the Google Cloud Console. For detailed setup instructions and additional information, refer to the official documentation. (react-native-google-signin.github.io)
Citations:
Add necessary configuration parameters to Google Sign-In
The GoogleSignin.configure({}) call must include at least the required webClientId, and you should also specify other parameters (e.g., offlineAccess, scopes, iosClientId) as needed.
File: components/LoginBottomSheet.tsx
Lines: 48–50
Suggested change:
useEffect(() => {
- GoogleSignin.configure({});
+ GoogleSignin.configure({
+ webClientId: 'YOUR_WEB_CLIENT_ID', // Required: from Google Cloud Console
+ offlineAccess: true, // Optional: if server-side API access is needed
+ scopes: ['email', 'profile'], // Optional: add any additional Google API scopes
+ iosClientId: 'YOUR_IOS_CLIENT_ID', // iOS only: from Google Cloud Console (or in plist)
+ // hostedDomain, forceConsentPrompt, accountName, etc., as needed
+ });
}, []);Replace placeholder IDs with your actual client IDs. For full details, see the official docs: https://react-native-google-signin.github.io/docs/api.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| useEffect(() => { | |
| GoogleSignin.configure({}); | |
| }, []); | |
| useEffect(() => { | |
| GoogleSignin.configure({ | |
| webClientId: 'YOUR_WEB_CLIENT_ID', // Required: from Google Cloud Console | |
| offlineAccess: true, // Optional: if server-side API access is needed | |
| scopes: ['email', 'profile'], // Optional: add any additional Google API scopes | |
| iosClientId: 'YOUR_IOS_CLIENT_ID', // iOS only: from Google Cloud Console (or in plist) | |
| // hostedDomain, forceConsentPrompt, accountName, etc., as needed | |
| }); | |
| }, []); |
🤖 Prompt for AI Agents
In components/LoginBottomSheet.tsx around lines 48 to 50, the
GoogleSignin.configure call is missing required configuration parameters. Update
the configure call to include at least the required webClientId obtained from
the Google Cloud Console, and optionally add offlineAccess, scopes, and
iosClientId as needed. Replace placeholder client IDs with your actual client
IDs to ensure proper Google Sign-In functionality.
|
🚀 Expo preview is ready!
|
Summary by CodeRabbit