aws-amplify-react custom federated icons

[michaelcuneo]

I've tried a tonne of different ways to customise the aws-amplify-react federated icons but it appears as though they don't change no matter what I do.

I've tried modifying and supplying a custom theme, and I've changed 'SignInButton, SiginInButtonIcon, SignInButtonContent, FacebookSignInButton, GoogleSignInButton, Button, ... they all appear to overlap, and the examples have alternating button styles and button CSS objects... so it's impossible to find out which one is current and/or relevant.

By default, my Authenticator with Theme={myTheme} removed... My federated buttons have no icons.

[ashika01]

@michaelcuneo Hey, did you try something like this?

<GoogleButton
    theme={{
        googleSignInButton: { backgroundColor: 'tomato' },
        signInButtonIcon: { backgroundColor: 'cyan' },
    }}
/>

This should let you change the style other than the svg of the icon. We dont apply the theme onto the icon svg itself to follow federation provider's default guidelines.

Note: if you are changing this styles you might wanna follow style/branding guidelines of respective federation provider. eg: for google - https://developers.google.com/identity/branding-guidelines

I hope this answers you question. If you have a strong use case to change styling, please let us know.

[michaelcuneo]

I’m a creative technologist so I always adhere to style guides. The problem is, there’s no theme. My buttons look terrible by default. The google icon is a G about 1mm tall in a half height box. And the Facebook icon doesn’t exists. This is with an <Authenticator /> component.

[ashika01]

@michaelcuneo could you post a code sample I can just paste and run? I tried with GoogleButton.

[michaelcuneo]

const LoginPage = () => {
  const signUpConfig = {
    defaultCountryCode: '61',
  };

  const federated = {
    google_client_id:
      '##########',
    facebook_app_id: '###########',
  };

  return (
    <React.Fragment>
      <Helmet key="Helmet">
        <title>Login Page</title>
        <meta name="description" content="Fastlab Login Page" />
      </Helmet>
      <Authenticator
        signUpConfig={signUpConfig}
        federated={federated}
        key="Authenticator"
        hide={[Greetings]}
      />
    </React.Fragment>
  );
};

[ashika01]

@michaelcuneo I could still change the style using theme. Like this

<Authenticator
    signUpConfig={signUpConfig}
    federated={federated}
    key="Authenticator"
    theme={{
        googleSignInButton: { backgroundColor: 'tomato', fontSize: '14px' },
        signInButtonIcon: { border: '2px solid red' },
    }}
/>

Pardon my random styling. Just testing it out real quick. Since we dont apply theme on the icon's svg itself, you might have to work around it or another solution would be to use your custom UI Button.

[michaelcuneo]

I'm sure you can 'change' the styling... my issue is, I don't have any. So I was trying to rebuild the styling myself...

This is what mine looks like by default, with no changes. Half height Google window, tiny 1mm high G, no Facebook Logo.

[michaelcuneo]

I have built an entire theme and imported it using the sample template... but it does not function to change any of the SVG icons or anything as expected.

.
.
.
export const Button = {
  display: 'inline-block',
  padding: '6px 12px',
  marginBottom: '0',
  fontSize: '14px',
  fontWeight: 400,
  lineHeight: '1.42857143',
  textAlign: 'center',
  whiteSpace: 'nowrap',
  verticalAlign: 'middle',
  touchAction: 'manipulation',
  cursor: 'pointer',
  userSelect: 'none',
  backgroundImage: 'none',
  border: '1px solid transparent',
  borderRadius: '4px',
  color: '#333',
  backgroundColor: '#fff',
  borderColor: '#ccc',
};

export const SignInButton = {
  position: 'relative',
  padding: '6px 12px 6px 44px',
  fontSize: '14px',
  textAlign: 'left',
  whiteSpace: 'nowrap',
  overflow: 'hidden',
  textOverflow: 'ellipsis',
  display: 'block',
  width: '100%',
  marginTop: '2px',
};

export const SignInButtonIcon = {};

export const SignInButtonContent = {};

export const FacebookSignInButton = {
  content: <FontAwesomeIcon name="facebook" />,
};
export const GoogleSignInButton = {
  content: <FontAwesomeIcon name="facebook" />,
};

.
.
. etc

const Bootstrap = {
  container: Container,

  navBar: NavBar,
  nav: Nav,
  navRight: NavRight,
  navItem: NavItem,
  navButton: NavButton,

  formContainer: FormContainer,
  formSection: FormSection,
  errorSection: ErrorSection,
  sectionHeader: SectionHeader,
  sectionBody: SectionBody,
  sectionFooter: SectionFooter,

  formRow: FormRow,
  actionRow: ActionRow,

  space: Space,

  signInButton: SignInButton,

  input: Input,
  button: Button,
  a: A,
  pre: Pre,

  facebookSignInButton: FacebookSignInButton,
  googleSignInButton: GoogleSignInButton,

  col1: Col1,
  col2: Col2,
  col3: Col3,
  col4: Col4,
  col5: Col5,
  col6: Col6,
  col7: Col7,
  col8: Col8,
  col9: Col9,
  col10: Col10,
  col11: Col11,
  col12: Col12,

  hidden: Hidden,
};

export default Bootstrap;

[michaelcuneo]

I can use your code, and supply a theme with a colour... but it still looks like this, with no icons displayed correctly.

[ashika01]

@michaelcuneo Interesting some how your styling isn't rendering properly. Even the defaults. could you give me screentshot of ur inspect screen? on the icon?

[michaelcuneo]

The .SVG Viewbox is 0x0

[michaelcuneo]

I forgot to mention... Obviously my facebook and google values for the Federation are valid and active (I've had issues with the buttons not rendering correctly in the past when the Federation Config wasn't correct, but these are both valid, and result in a successful login on click.

[ashika01]

Shouldn't be a problem. Appreciate you calling it out 👍 Let me compare my css with yours.

[michaelcuneo]

Here's a slightly better shot, with way more CSS...

If I mouse over the internal .SVG Components, they're actually spaced out all over the form itself... overlapping username, password, both buttons... odd.

[michaelcuneo]

Here's a shot showing the first segment of the Google Logo showing up half-way through the form.

[ashika01]

@michaelcuneo So I ma seeing your SVG styles to be way different than mine. are you changing svg styles in general in your app somewhere?

[michaelcuneo]

I have a single global style that doesn't appear to affect any .SVG styling.

import { injectGlobal } from 'styled-components';

/* eslint no-unused-expressions: 0 */
injectGlobal`
* {
  margin: 0;
  padding: 0;
}

html {
  width: 100vw;
  height: 100vh;
  -webkit-overflow-scrolling: touch;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

body.noScroll { /* ...or body.dialogShowing */
  overflow: hidden;
}

html,
body,
#outer-container {
  position: absolute;
  height: 100vh;
  width: 100%;
  color: black;
  touch-action: manipulation;
}

body > #outer-container {
  height: auto;
  min-height: 100%;
}

#app {
  display: flex;
  min-height: 100vh;
  min-width: 100vw;
  color: #3E3E3E;
  align-content: center;
}

textarea:focus {
  outline: none,
}

input:focus {
  outline: none,
}

*:focus {
  outline: none,
}

.form-control:focus {
  border-color: rgba(255, 255, 255, 0);
  -webkit-box-shadow: none;
  box-shadow: none;
}

body.fontLoaded {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: medium;
  -webkit-text-size-adjust: auto;
  -ms-text-size-adjust: auto;
  text-size-adjust: auto;
}

p,
label {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 0.8em;
  line-height: 1.5em;
}
`;

I do use a lot of SVG's in this app, the background, logo's, image frames, etc... but it's all just straight up .SVG pulled in without any .CSS manipulation.

[ashika01]

@michaelcuneo : Found it, the style tag that bringing in these box-sizing and background-repeat is the cause of the problem I guess. If you just turn those off in inspect and see if everything is normal?

[ashika01]

@michaelcuneo Global injects can be tricky sometimes. Let me know how it goes after disabling these two in the inspect. If it works as expected then I would suggest to correct the global styles accordingly.

[michaelcuneo]

Interesting. This *, ::before, ::after {} exists nowhere in my code, when I do a 'Find all in files.'

[michaelcuneo]

Which means... I didn't write it, It would be coming from something I imported. I guess I'll have to run through every single one of them and find out which one it was... or just *, ::before, :: after { Important! }; to force it back to default on the page before the login displays?

[michaelcuneo]

Box-sizing was in React-Bootstrap. I was using Forms from this, I'll be switching this to rebass and Formik ... there's half the problem solved.

[ashika01]

Not sure where its coming I see box-sizing in html of your global style. But I would think it not to be applied here. IMO, putting the page to its default's should work. But I dont think its an issue with amplify tho :) Let me know how it goes. If this is no longer and issue, please feel free to close this.

[ashika01]

Ah ha.. I see. Yeah. sure try that. If you have any other issue , open a new issue.

[michaelcuneo]

I have found where it comes in before and after... Sanitize.css. I would assume that anything would work with Sanitize.

[ashika01]

@michaelcuneo Have you got it resolved.? I am closing this issue as the styling issues isn't coming from amplify. I can still help you on the thread here. Please let me know if it needs to be reopened.

[michaelcuneo]

I’d have to disagree with you on that one. The styling isn’t ‘coming’ from Amplify, but it’s running alongside a styling that hundreds and thousands of people rely on. Amplify isn’t working properly with Sanitize.

If Amplify doesn’t work with a best practises boilerplate it might be an issue with the way Amplify is styling the buttons.

sanitize.css is a CSS library that provides consistent, cross-browser default styling of HTML elements alongside useful defaults.

It is developed alongside normalize.css, which means every normalization is included, and every normalization and opinion are clearly marked and documented.

[xitanggg]

The easiest workaround is perhaps simply create your own button and pass in the facebook/google sign in.

import { Auth } from 'aws-amplify'
<button
  onClick={() => Auth.federatedSignIn({provider: 'Facebook'})}
>Sign In with Facebook</button>

Check out this article for more info.

[ericclemmons]

5073 has been merged and we're working to get it released soon!

[michaelcuneo]

My initial problem found that it was actually Amplify + Sanitize.css not Amplify + Bootstrap, Bootstrap was something I could do without, so I removed it and switched to something that wasn't so old and annoying. Sanitize.css on the otherhand, was the ultimate cause of this, and still is.

Will this PR account for Sanitize.css as well as Bootstrap...

[ericclemmons]

Yes, #5073 does.

[github-actions[bot]]

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.