@financial-times/o3-social-sign-in v2.0.0
o3-social-sign-in
A button for social sign-in providers.
Markup
o3-social-sign-in supports JSX templates for React users, or direct HTML. We recommend using JSX where possible.
Two providers are supported: Google and Apple. We recommend you follow their guides to integrate o3-social-sign-on to
their sign-in flows:
<button
id="appleid-signin"
class="o3-social-sign-in-button o3-social-sign-in-button--apple"
>
<span class="o3-social-sign-in-button__copy">Sign in with Apple</span>
</button>
<button
id="gSignInWrapper"
class="o3-social-sign-in-button o3-social-sign-in-button--google"
>
<span class="o3-social-sign-in-button__copy">Sign in with Google</span>
</button><SocialSignIn provider="apple" />
<SocialSignIn provider="google" />When using the TSX component, ids will automatically be set. For Apple sign in, the id is appleid-signin and for
Google it is gSignInWrapper.
By default, the TSX component will display the button with default copy. Use the text property to customise it:
<SocialSignIn provider="apple" text="Register with Apple" />
<SocialSignIn provider="google" text="Register with Google" />Properties
| Property | Values | Description |
|---|---|---|
provider | apple, google | Styles the button according to the sign in provider's design |
text | Any string value | (Optional) Lets users override copy with custom content. If no string is provided then Sign in with <provider> will display instead. |
Migration
| State | Major Version | Last Minor Release | Migration guide |
|---|---|---|---|
| ✨ active | 2 | 2.0 | migrate to v2 |
| ╳ deprecated | 1 | 1.1 | - |
Contact
If you have any questions or comments about this component, or need help using it, please either raise an issue, visit #origami-support or email Origami Support.
Licence
This software is published by the Financial Times under the MIT licence.