Skip to content

Fix iframe for Google Sign-In #25645

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
marcochavezf merged 4 commits into from
Aug 22, 2023
Merged

Fix iframe for Google Sign-In #25645

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
33d570a
fix iframe for Google Sign-In
rayane-d Aug 22, 2023
d04aa15
dummy commit to trigger checks
rayane-d Aug 22, 2023
0f8e7a6
correct comment
rayane-d Aug 22, 2023
5f3aad6
Merge branch 'Expensify:main' into fix-Rectangular-white-container-su…
rayane-d Aug 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 1 addition & 3 deletions contributingGuides/APPLE_GOOGLE_SIGNIN.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,9 +80,7 @@ Due to Expensify's expectation that a user will be using the same account on web

The current Sign in with Google library for web [does not allow arbitrary customization of the sign-in button](https://developers.google.com/identity/gsi/web/guides/offerings#sign_in_with_google_button). (The recently deprecated version of the Sign in with Google for web did offer this capability.)

This means the button is limited in design: there are no offline or hover states, and there can only be a white background for the button. We were able to get the official Apple button options to match, so we used the Google options as the starting point for the design.

Additionally, note that the Google button has a rectangular white background when shown in a client app served on `localhost`, due to the iframe it uses in that scenario. This is expected, and will not be present when the app is hosted on other domains.
This means the button is limited in design: there are no offline or hover states, and there can only be a white background for the button. We were able to get the official Apple button options to match, so we used the Google options as the starting point for the design.

### Sign in with Apple does not allow `localhost`

Expand Down
5 changes: 2 additions & 3 deletions src/pages/signin/LoginForm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -230,9 +230,8 @@ function LoginForm(props) {
containerStyles={[styles.mh0]}
/>
{
// This feature has a few behavioral and visual differences in development mode. To prevent confusion
// for developers about possible regressions, we won't render
// buttons in development mode.
// This feature has a few behavioral differences in development mode. To prevent confusion
// for developers about possible regressions, we won't render buttons in development mode.
// For more information about these differences and how to test in development mode,
// see`Expensify/App/contributingGuides/APPLE_GOOGLE_SIGNIN.md`
CONFIG.ENVIRONMENT !== CONST.ENVIRONMENT.DEV && (
Expand Down
2 changes: 2 additions & 0 deletions src/styles/styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3636,13 +3636,15 @@ const styles = {
},

googleButtonContainer: {
colorScheme: 'light',
width: 40,
height: 40,
marginLeft: 12,
alignItems: 'center',
},

googlePillButtonContainer: {
colorScheme: 'light',
height: 40,
width: 219,
},
Expand Down