Skip to content

Commit 29db7e2

Browse files
wti806wti806
authored
apple sign-in support (firebase#642)
* apple sign-in support * remove yahoo and apple in demo app * enabled apple in demo * bumped the version in readme and added changelog * Fixed changelog
1 parent 14099d1 commit 29db7e2

File tree

17 files changed

+209
-139
lines changed

17 files changed

+209
-139
lines changed

‎CHANGELOG.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
* Added support for `Apple` sign-in.
2+
* Provided default configurations for `Microsoft` and `Yahoo` providers.

‎README.md

Lines changed: 34 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ to eliminate boilerplate code and promote best practices.
88

99
FirebaseUI Auth provides a drop-in auth solution that handles the UI flows for
1010
signing in users with email addresses and passwords, phone numbers, Identity
11-
Provider Sign In including Google, Facebook, GitHub, Twitter, Microsoft, Yahoo,
12-
OpenID Connect (OIDC) providers and SAML providers. It is built on top of
11+
Provider Sign In including Google, Facebook, GitHub, Twitter, Apple, Microsoft,
12+
Yahoo, OpenID Connect (OIDC) providers and SAML providers. It is built on top of
1313
[Firebase Auth](https://firebase.google.com/docs/auth).
1414

1515
The FirebaseUI component implements best practices for authentication on mobile
@@ -22,9 +22,9 @@ FirebaseUI Auth clients are also available for
2222
[Android](https://github.com/firebase/firebaseui-android).
2323

2424
FirebaseUI fully supports all recent browsers. Signing in with federated
25-
providers (Google, Facebook, Twitter, GitHub, Microsoft, Yahoo, OIDC, SAML) is
26-
also supported in Cordova/Ionic environments. Additional non-browser
27-
environments (React Native...) or Chrome extensions will be added once the
25+
providers (Google, Facebook, Twitter, GitHub, Apple, Microsoft, Yahoo, OIDC,
26+
SAML) is also supported in Cordova/Ionic environments. Additional non-browser
27+
environments(React Native...) or Chrome extensions will be added once the
2828
underlying Firebase core SDK supports them in a way that is compatible with
2929
FirebaseUI.
3030

@@ -60,8 +60,8 @@ You just need to include the following script and CSS file in the `<head>` tag
6060
of your page, below the initialization snippet from the Firebase Console:
6161

6262
```html
63-
<script src="https://www.gstatic.com/firebasejs/ui/4.2.0/firebase-ui-auth.js"></script>
64-
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.2.0/firebase-ui-auth.css" />
63+
<script src="https://www.gstatic.com/firebasejs/ui/4.3.0/firebase-ui-auth.js"></script>
64+
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.3.0/firebase-ui-auth.css" />
6565
```
6666

6767
#### Localized Widget
@@ -70,17 +70,17 @@ Localized versions of the widget are available through the CDN. To use a localiz
7070
localized JS library instead of the default library:
7171

7272
```html
73-
<script src="https://www.gstatic.com/firebasejs/ui/4.2.0/firebase-ui-auth__{LANGUAGE_CODE}.js"></script>
74-
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.2.0/firebase-ui-auth.css" />
73+
<script src="https://www.gstatic.com/firebasejs/ui/4.3.0/firebase-ui-auth__{LANGUAGE_CODE}.js"></script>
74+
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.3.0/firebase-ui-auth.css" />
7575
```
7676

7777
where `{LANGUAGE_CODE}` is replaced by the code of the language you want. For example, the French
7878
version of the library is available at
79-
`https://www.gstatic.com/firebasejs/ui/4.2.0/firebase-ui-auth__fr.js`. The list of available
79+
`https://www.gstatic.com/firebasejs/ui/4.3.0/firebase-ui-auth__fr.js`. The list of available
8080
languages and their respective language codes can be found at [LANGUAGES.md](LANGUAGES.md).
8181

8282
Right-to-left languages also require the right-to-left version of the stylesheet, available at
83-
`https://www.gstatic.com/firebasejs/ui/4.2.0/firebase-ui-auth-rtl.css`, instead of the default
83+
`https://www.gstatic.com/firebasejs/ui/4.3.0/firebase-ui-auth-rtl.css`, instead of the default
8484
stylesheet. The supported right-to-left languages are Arabic (ar), Farsi (fa), and Hebrew (iw).
8585

8686
### Option 2: npm Module
@@ -159,6 +159,7 @@ provider you want to use in their own developer app settings. Please read the
159159
- [Github](https://firebase.google.com/docs/auth/web/github-auth#before_you_begin)
160160
- [Anonymous](https://firebase.google.com/docs/auth/web/anonymous-auth#before_you_begin)
161161
- [Email link](https://firebase.google.com/docs/auth/web/email-link-auth#before_you_begin)
162+
- [Apple](https://firebase.google.com/docs/auth/web/apple)
162163
- [Microsoft](https://firebase.google.com/docs/auth/web/microsoft-oauth)
163164
- [Yahoo](https://firebase.google.com/docs/auth/web/yahoo-oauth)
164165

@@ -195,8 +196,8 @@ for a more in-depth example, showcasing a Single Page Application mode.
195196
* TODO(DEVELOPER): Paste the initialization snippet from:
196197
* Firebase Console > Overview > Add Firebase to your web app. *
197198
***************************************************************************************** -->
198-
<script src="https://cdn.firebase.com/libs/firebaseui/4.2.0/firebaseui.js"></script>
199-
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/4.2.0/firebaseui.css" />
199+
<script src="https://www.gstatic.com/firebasejs/ui/4.3.0/firebase-ui-auth.js"></script>
200+
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.3.0/firebase-ui-auth.css" />
200201
<script type="text/javascript">
201202
// FirebaseUI config.
202203
var uiConfig = {
@@ -544,6 +545,7 @@ To see FirebaseUI in action with one-tap sign-up, check out the FirebaseUI
544545
|Email and password|`firebase.auth.EmailAuthProvider.PROVIDER_ID` |
545546
|Phone number |`firebase.auth.PhoneAuthProvider.PROVIDER_ID` |
546547
|Anonymous |`firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID`|
548+
|Apple |`apple.com` |
547549
|Microsoft |`microsoft.com` |
548550
|Yahoo |`yahoo.com` |
549551
|SAML (GCIP only) |`saml.*********` |
@@ -590,10 +592,25 @@ ui.start('#firebaseui-auth-container', {
590592
#### Generic OAuth provider
591593

592594
You can let your users authenticate with FirebaseUI using OAuth providers like
595+
[Apple](https://firebase.google.com/docs/auth/web/apple),
593596
[Microsoft Azure Active Directory](https://firebase.google.com/docs/auth/web/microsoft-oauth)
594597
and [Yahoo](https://firebase.google.com/docs/auth/web/yahoo-oauth)
595598
by integrating generic OAuth Login into your app.
596599

600+
You just need to pass the provider ID in `signInOptions`, FirebaseUI provides
601+
the default configurations for the sign in button(button color, icon and display name):
602+
603+
```javascript
604+
ui.start('#firebaseui-auth-container', {
605+
signInOptions: [
606+
'apple.com',
607+
'microsoft.com',
608+
'yahoo.com',
609+
]
610+
});
611+
```
612+
613+
You can also override these default configurations with your own custom ones.
597614
Generic OAuth providers' `signInOptions` support the following configuration
598615
parameters.
599616

@@ -623,7 +640,7 @@ parameters.
623640
</tr>
624641
<tr>
625642
<td>buttonColor</td>
626-
<td>Yes</td>
643+
<td>No</td>
627644
<td>
628645
The color of sign in button. The css of the button can be overwritten with
629646
the attribute/value in the HTML element:
@@ -632,7 +649,7 @@ parameters.
632649
</tr>
633650
<tr>
634651
<td>iconUrl</td>
635-
<td>Yes</td>
652+
<td>No</td>
636653
<td>
637654
The URL of the Identity Provider's icon. This will be displayed on the
638655
provider's sign-in button, etc.
@@ -1228,8 +1245,8 @@ FirebaseUI is displayed.
12281245
* TODO(DEVELOPER): Paste the initialization snippet from:
12291246
* Firebase Console > Overview > Add Firebase to your web app. *
12301247
***************************************************************************************** -->
1231-
<script src="https://cdn.firebase.com/libs/firebaseui/4.2.0/firebaseui.js"></script>
1232-
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/4.2.0/firebaseui.css" />
1248+
<script src="https://www.gstatic.com/firebasejs/ui/4.3.0/firebase-ui-auth.js"></script>
1249+
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.3.0/firebase-ui-auth.css" />
12331250
<script type="text/javascript">
12341251
// FirebaseUI config.
12351252
var uiConfig = {

‎changelog.txt

Whitespace-only changes.

‎demo/public/app.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -72,11 +72,11 @@ function getUiConfig() {
7272
},
7373
{
7474
provider: 'microsoft.com',
75-
providerName: 'Microsoft',
76-
buttonColor: '#2F2F2F',
77-
iconUrl: 'https://docs.microsoft.com/en-us/azure/active-directory/develop/media/howto-add-branding-in-azure-ad-apps/ms-symbollockup_mssymbol_19.png',
7875
loginHintKey: 'login_hint'
7976
},
77+
{
78+
provider: 'apple.com',
79+
},
8080
firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID
8181
],
8282
// Terms of service url.

‎demo/public/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8">
55
<title>FirebaseUI Auth Demo</title>
66
<link rel="manifest" href="manifest.json">
7-
<script src="https://www.gstatic.com/firebasejs/6.0.1/firebase.js"></script>
7+
<script src="https://www.gstatic.com/firebasejs/7.2.2/firebase.js"></script>
88
<script src="config.js"></script>
99
<script src="common.js"></script>
1010
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

‎demo/public/widget.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8">
55
<title>FirebaseUI Auth Demo</title>
6-
<script src="https://www.gstatic.com/firebasejs/6.0.1/firebase.js"></script>
6+
<script src="https://www.gstatic.com/firebasejs/7.2.2/firebase.js"></script>
77
<script src="config.js"></script>
88
<script src="common.js"></script>
99
<script src="dist/firebaseui.js"></script>
@@ -56,11 +56,11 @@
5656
},
5757
{
5858
provider: 'microsoft.com',
59-
providerName: 'Microsoft',
60-
buttonColor: '#2F2F2F',
61-
iconUrl: 'https://docs.microsoft.com/en-us/azure/active-directory/develop/media/howto-add-branding-in-azure-ad-apps/ms-symbollockup_mssymbol_19.png',
6259
loginHintKey: 'login_hint'
6360
},
61+
{
62+
provider: 'apple.com',
63+
},
6464
firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID
6565
],
6666
// Terms of service url.

‎image/apple.png

616 Bytes
Loading

‎image/microsoft.svg

Lines changed: 1 addition & 0 deletions
Loading

‎image/yahoo.svg

Lines changed: 1 addition & 0 deletions
Loading

‎javascript/ui/page/base.js

Lines changed: 62 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -50,20 +50,73 @@ firebaseui.auth.ui.page.SHOW_PROCESSING_DELAY_ = 500;
5050

5151

5252
/**
53-
* @const {Object}
53+
* The default icon URLs for the IdPs.
54+
* @const {!Object}
5455
* @private
5556
*/
56-
firebaseui.auth.ui.page.IJ_DATA_ = {
57-
googleLogo: firebaseui.auth.ui.page.IMAGE_BASE + 'google.svg',
58-
githubLogo: firebaseui.auth.ui.page.IMAGE_BASE + 'github.svg',
59-
facebookLogo: firebaseui.auth.ui.page.IMAGE_BASE + 'facebook.svg',
60-
twitterLogo: firebaseui.auth.ui.page.IMAGE_BASE + 'twitter.svg',
61-
passwordLogo: firebaseui.auth.ui.page.IMAGE_BASE + 'mail.svg',
62-
phoneLogo: firebaseui.auth.ui.page.IMAGE_BASE + 'phone.svg',
63-
anonymousLogo: firebaseui.auth.ui.page.IMAGE_BASE + 'anonymous.png'
57+
firebaseui.auth.ui.page.DEFAULT_ICON_URLS_ = {
58+
'google.com': firebaseui.auth.ui.page.IMAGE_BASE + 'google.svg',
59+
'github.com': firebaseui.auth.ui.page.IMAGE_BASE + 'github.svg',
60+
'facebook.com': firebaseui.auth.ui.page.IMAGE_BASE + 'facebook.svg',
61+
'twitter.com': firebaseui.auth.ui.page.IMAGE_BASE + 'twitter.svg',
62+
'password': firebaseui.auth.ui.page.IMAGE_BASE + 'mail.svg',
63+
'phone': firebaseui.auth.ui.page.IMAGE_BASE + 'phone.svg',
64+
'anonymous': firebaseui.auth.ui.page.IMAGE_BASE + 'anonymous.png',
65+
'microsoft.com': firebaseui.auth.ui.page.IMAGE_BASE + 'microsoft.svg',
66+
'yahoo.com': firebaseui.auth.ui.page.IMAGE_BASE + 'yahoo.svg',
67+
'apple.com': firebaseui.auth.ui.page.IMAGE_BASE + 'apple.png',
68+
};
69+
70+
71+
/**
72+
* The default button colors for the IdPs.
73+
* @const {!Object}
74+
* @private
75+
*/
76+
firebaseui.auth.ui.page.DEFAULT_BUTTON_COLORS_ = {
77+
'google.com': '#ffffff',
78+
'github.com': '#333333',
79+
'facebook.com': '#3b5998',
80+
'twitter.com': '#55acee',
81+
'password': '#db4437',
82+
'phone': '#02bd7e',
83+
'anonymous': '#f4b400',
84+
'microsoft.com': '#2F2F2F',
85+
'yahoo.com': '#720E9E',
86+
'apple.com': '#000000',
6487
};
6588

6689

90+
/**
91+
* The default display names for the IdPs.
92+
* @const {!Object}
93+
* @private
94+
*/
95+
firebaseui.auth.ui.page.DEFAULT_PROVIDER_NAMES_ = {
96+
'google.com': 'Google',
97+
'github.com': 'GitHub',
98+
'facebook.com': 'Facebook',
99+
'twitter.com': 'Twitter',
100+
'password': 'Password',
101+
'phone': 'Phone',
102+
'anonymous': 'Guest',
103+
'microsoft.com': 'Microsoft',
104+
'yahoo.com': 'Yahoo',
105+
'apple.com': 'Apple',
106+
};
107+
108+
109+
/**
110+
* The injected data passed to the soy templates.
111+
* @const {!Object}
112+
* @private
113+
*/
114+
firebaseui.auth.ui.page.IJ_DATA_ = {
115+
defaultIconUrls: firebaseui.auth.ui.page.DEFAULT_ICON_URLS_,
116+
defaultButtonColors: firebaseui.auth.ui.page.DEFAULT_BUTTON_COLORS_,
117+
defaultProviderNames: firebaseui.auth.ui.page.DEFAULT_PROVIDER_NAMES_,
118+
};
119+
67120

68121
/**
69122
* Base page custom event.

0 commit comments

Comments
 (0)