o3-social-sign-in

A button for social sign-in providers.

• o3-social-sign-in
  • Markup
  • Migration
  • Contact
  • Licence

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:

• Displaying Sign in with Apple buttons on the web
• Building a custom Google Sign-In button

<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.