Authenticator with only social sign in (hide regular sign in fields)

[sumuhans]

I cannot find a way to show only a google sign in button without showing anything else.
socialProviders={["google"] makes the google button show up. but I can't see a way to hide any of the other fields(The user name and password fields for regular sign in). Is there a way please? If not I would like to request this feature please.

[zchenwei]

Hi @sumuhans, thanks for bringing this up. We currently do not support hiding the sign in fields but if you have every reason to do that, you can use CSS to hide them.

[sumuhans]

Hi @sumuhans, thanks for bringing this up. We currently do not support hiding the sign in fields but if you have every reason to do that, you can use CSS to hide them.

Thanks so much for the prompt response @zchenwei it is very kind of you. Please can you add some details or a simple example showing how CSS could be used to hide everything expect the google sign in button?

[onhate]

[data-amplify-authenticator] [data-amplify-router] fieldset {
    display: none;
}
[data-amplify-authenticator] .amplify-divider {
    display: none;
}
[data-amplify-authenticator] form div:not(.federated-sign-in-container) button {
    display: none;
}
[data-amplify-authenticator] form + [data-amplify-footer] {
    display: none;
}

this should do the trick, but a flag to the would be waaaaay better.