@@ -68,17 +68,17 @@ Localized versions of the widget are available through the CDN. To use a localiz
68
68
localized JS library instead of the default library:
69
69
70
70
``` html
71
- <script src =" https://www.gstatic.com/firebasejs/ui/3.5.2 /firebase-ui-auth__{LANGUAGE_CODE}.js" ></script >
72
- <link type =" text/css" rel =" stylesheet" href =" https://www.gstatic.com/firebasejs/ui/3.5.2 /firebase-ui-auth.css" />
71
+ <script src =" https://www.gstatic.com/firebasejs/ui/3.6.0 /firebase-ui-auth__{LANGUAGE_CODE}.js" ></script >
72
+ <link type =" text/css" rel =" stylesheet" href =" https://www.gstatic.com/firebasejs/ui/3.6.0 /firebase-ui-auth.css" />
73
73
```
74
74
75
75
where ` {LANGUAGE_CODE} ` is replaced by the code of the language you want. For example, the French
76
76
version of the library is available at
77
- ` https://www.gstatic.com/firebasejs/ui/3.5.2 /firebase-ui-auth__fr.js ` . The list of available
77
+ ` https://www.gstatic.com/firebasejs/ui/3.6.0 /firebase-ui-auth__fr.js ` . The list of available
78
78
languages and their respective language codes can be found at [ LANGUAGES.md] ( LANGUAGES.md ) .
79
79
80
80
Right-to-left languages also require the right-to-left version of the stylesheet, available at
81
- ` https://www.gstatic.com/firebasejs/ui/3.5.2 /firebase-ui-auth-rtl.css ` , instead of the default
81
+ ` https://www.gstatic.com/firebasejs/ui/3.6.0 /firebase-ui-auth-rtl.css ` , instead of the default
82
82
stylesheet. The supported right-to-left languages are Arabic (ar), Farsi (fa), and Hebrew (iw).
83
83
84
84
### Option 2: npm Module
@@ -157,6 +157,15 @@ provider you want to use in their own developer app settings. Please read the
157
157
- [ Github] ( https://firebase.google.com/docs/auth/web/github-auth#before_you_begin )
158
158
- [ Anonymous] ( https://firebase.google.com/docs/auth/web/anonymous-auth#before_you_begin )
159
159
- [ Email link] ( https://firebase.google.com/docs/auth/web/email-link-auth#before_you_begin )
160
+ - [ Microsoft] ( https://firebase.google.com/docs/auth/web/microsoft-oauth )
161
+ - [ Yahoo] ( https://firebase.google.com/docs/auth/web/yahoo-oauth )
162
+
163
+ For [ Google Cloud's Identity Platform (GCIP)] ( https://cloud.google.com/identity-cp/ )
164
+ developers, you can also enable SAML and OIDC providers following the
165
+ instructions:
166
+
167
+ - [ SAML] ( https://cloud.google.com/identity-cp/docs/how-to-enable-application-for-saml )
168
+ - [ OIDC] ( https://cloud.google.com/identity-cp/docs/how-to-enable-application-for-oidc )
160
169
161
170
### Starting the sign-in flow
162
171
@@ -527,6 +536,10 @@ To see FirebaseUI in action with one-tap sign-up, check out the FirebaseUI
527
536
| Email and password| ` firebase.auth.EmailAuthProvider.PROVIDER_ID ` |
528
537
| Phone number | ` firebase.auth.PhoneAuthProvider.PROVIDER_ID ` |
529
538
| Anonymous | ` firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID ` |
539
+ | Microsoft | ` microsoft.com ` |
540
+ | Yahoo | ` yahoo.com ` |
541
+ | SAML (GCIP only) | ` saml.********* ` |
542
+ | OIDC (GCIP only) | ` oidc.********* ` |
530
543
531
544
### Configure OAuth providers
532
545
@@ -566,15 +579,252 @@ ui.start('#firebaseui-auth-container', {
566
579
});
567
580
```
568
581
582
+ #### Generic OAuth provider
583
+
584
+ You can let your users authenticate with FirebaseUI using OAuth providers like
585
+ [ Microsoft Azure Active Directory] ( https://firebase.google.com/docs/auth/web/microsoft-oauth )
586
+ and [ Yahoo] ( https://firebase.google.com/docs/auth/web/yahoo-oauth )
587
+ by integrating generic OAuth Login into your app.
588
+
589
+ Generic OAuth providers' ` signInOptions ` support the following configuration
590
+ parameters.
591
+
592
+ <table >
593
+ <thead >
594
+ <tr >
595
+ <th >Name</th >
596
+ <th >Required</th >
597
+ <th >Description</th >
598
+ </tr >
599
+ </thead >
600
+ <tbody >
601
+ <tr >
602
+ <td >provider</td >
603
+ <td >Yes</td >
604
+ <td >The provider ID, eg. <code >microsoft.com</code >.</td >
605
+ </tr >
606
+ <tr >
607
+ <td >providerName</td >
608
+ <td >No</td >
609
+ <td >
610
+ The provider name displayed to end users (sign in button/linking prompt),
611
+ eg. "Microsoft"
612
+ <em >Default:</em >
613
+ <code >provider ID</code >
614
+ </td >
615
+ </tr >
616
+ <tr >
617
+ <td >buttonColor</td >
618
+ <td >Yes</td >
619
+ <td >
620
+ The color of sign in button. The css of the button can be overwritten with
621
+ the attribute/value in the HTML element:
622
+ <code >data-provider-id="providerId"</code >
623
+ </td >
624
+ </tr >
625
+ <tr >
626
+ <td >iconUrl</td >
627
+ <td >Yes</td >
628
+ <td >
629
+ The URL of the Identity Provider's icon. This will be displayed on the
630
+ provider's sign-in button, etc.
631
+ </td >
632
+ </tr >
633
+ <tr >
634
+ <td >scopes</td >
635
+ <td >No</td >
636
+ <td >
637
+ The list of additional OAuth 2.0 scopes beyond basic profile that you want to
638
+ request from the authentication provider.
639
+ </td >
640
+ </tr >
641
+ <tr >
642
+ <td >customParameters</td >
643
+ <td >No</td >
644
+ <td >
645
+ The list of additional custom OAuth parameters that you want to send with the
646
+ OAuth request.
647
+ </td >
648
+ </tr >
649
+ <tr >
650
+ <td >loginHintKey</td >
651
+ <td >No</td >
652
+ <td >
653
+ The key of the custom parameter, with which the login hint can be passed to
654
+ the provider. This is useful in case a user previously signs up with an IdP
655
+ like Microsoft and then tries to sign in with email using the same Microsoft
656
+ email. FirebaseUI can then ask the user to sign in with that email to the
657
+ already registered account with Microsoft. For Microsoft and Yahoo,
658
+ this field is ` login_hint ` .
659
+ </td >
660
+ </tr >
661
+ </tbody >
662
+ </table >
663
+
664
+ ``` javascript
665
+ ui .start (' #firebaseui-auth-container' , {
666
+ signInOptions: [
667
+ {
668
+ provider: ' microsoft.com' ,
669
+ providerName: ' Microsoft' ,
670
+ buttonColor: ' #2F2F2F' ,
671
+ iconUrl: ' <icon-url-of-sign-in-button>' ,
672
+ loginHintKey: ' login_hint'
673
+ scopes: [
674
+ ' mail.read'
675
+ ],
676
+ customParameters: {
677
+ prompt: ' consent'
678
+ }
679
+ }
680
+ ]
681
+ });
682
+ ```
683
+
684
+ ### OpenID Connect (OIDC) providers (GCIP only)
685
+
686
+ For [ GCIP] ( https://cloud.google.com/identity-cp ) customers, you can enable your app for
687
+ [ OpenID Connect (OIDC)] ( https://cloud.google.com/identity-cp/docs/how-to-enable-application-for-oidc )
688
+ authentication with FirebaseUI.
689
+
690
+ OIDC providers' ` signInOptions ` support the following configuration parameters.
691
+
692
+ <table >
693
+ <thead >
694
+ <tr >
695
+ <th >Name</th >
696
+ <th >Required</th >
697
+ <th >Description</th >
698
+ </tr >
699
+ </thead >
700
+ <tbody >
701
+ <tr >
702
+ <td >provider</td >
703
+ <td >Yes</td >
704
+ <td >The provider ID, eg. <code >oidc.myProvider</code >.</td >
705
+ </tr >
706
+ <tr >
707
+ <td >providerName</td >
708
+ <td >No</td >
709
+ <td >
710
+ The provider name displayed to end users (sign in button/linking prompt).
711
+ <em >Default:</em >
712
+ <code >provider ID</code >
713
+ </td >
714
+ </tr >
715
+ <tr >
716
+ <td >buttonColor</td >
717
+ <td >Yes</td >
718
+ <td >
719
+ The color of sign in button. The css of the button can be overwritten with
720
+ attribute/value in the HTML element:
721
+ <code >data-provider-id="providerId"</code >
722
+ </td >
723
+ </tr >
724
+ <tr >
725
+ <td >iconUrl</td >
726
+ <td >Yes</td >
727
+ <td >
728
+ The URL of the Identity Provider's icon. This will be displayed on the
729
+ provider's sign-in button, etc.
730
+ </td >
731
+ </tr >
732
+ <tr >
733
+ <td >customParameters</td >
734
+ <td >No</td >
735
+ <td >
736
+ The list of additional custom parameters that the OIDC provider supports.
737
+ </td >
738
+ </tr >
739
+ </tbody >
740
+ </table >
741
+
742
+ ``` javascript
743
+ ui .start (' #firebaseui-auth-container' , {
744
+ signInOptions: [
745
+ {
746
+ provider: ' oidc.myProvider`,
747
+ providerName: ' MyOIDCProvider' ,
748
+ buttonColor: ' #2F2F2F ' ,
749
+ iconUrl: ' < icon- url- of - sign- in - button> ' ,
750
+ customParameters: {
751
+ OIDCSupportedParameter: ' value'
752
+ }
753
+ }
754
+ ]
755
+ });
756
+ ```
757
+
758
+ ### SAML providers (GCIP only)
759
+
760
+ For [GCIP](https://cloud.google.com/identity-cp) customers, you can enable your app for
761
+ [SAML](https://cloud.google.com/identity-cp/docs/how-to-enable-application-for-saml)
762
+ authentication with FirebaseUI.
763
+
764
+ SAML providers' ` signInOptions` support the following configuration parameters.
765
+
766
+ < table>
767
+ < thead>
768
+ < tr>
769
+ < th> Name< / th>
770
+ < th> Required< / th>
771
+ < th> Description< / th>
772
+ < / tr>
773
+ < / thead>
774
+ < tbody>
775
+ < tr>
776
+ < td> provider< / td>
777
+ < td> Yes< / td>
778
+ < td> The provider ID , eg. < code> saml .myProvider < / code> .< / td>
779
+ < / tr>
780
+ < tr>
781
+ < td> providerName< / td>
782
+ < td> No< / td>
783
+ < td>
784
+ The provider name displayed to end users (sign in button/ linking prompt).
785
+ < em> Default: < / em>
786
+ < code> provider ID < / code>
787
+ < / td>
788
+ < / tr>
789
+ < tr>
790
+ < td> buttonColor< / td>
791
+ < td> Yes< / td>
792
+ < td>
793
+ The color of sign in button . The css of the button can be overwritten with
794
+ attribute/ value in the HTML element:
795
+ < code> data- provider- id= " providerId" < / code>
796
+ < / td>
797
+ < / tr>
798
+ < tr>
799
+ < td> iconUrl< / td>
800
+ < td> Yes< / td>
801
+ < td>
802
+ The URL of the Identity Provider' s icon. This will be displayed on the
803
+ provider' s sign- in button, etc.
804
+ < / td>
805
+ < / tr>
806
+ < / tbody>
807
+ < / table>
808
+
809
+ ` ` ` javascript
810
+ ui.start('#firebaseui-auth-container', {
811
+ signInOptions: [
812
+ {
813
+ provider: 'saml.myProvider',
814
+ providerName: 'MySAMLProvider',
815
+ buttonColor: '#2F2F2F',
816
+ iconUrl: '<icon-url-of-sign-in-button>'
817
+ }
818
+ ]
819
+ });
820
+ ` ` `
821
+
569
822
### Configure Email Provider
570
823
571
824
You can configure either email/ password or email/ link sign- in with FirebaseUI by
572
825
providing the relevant object in the configuration < code> signInOptions< / code>
573
826
array.
574
827
575
- <table >
576
- <thead >
577
- <tr >
578
828
< table>
579
829
< thead>
580
830
< tr>
@@ -1369,6 +1619,10 @@ the incoming link when the user clicks it to complete sign-in.
1369
1619
| Github | ` firebase.auth.GithubAuthProvider.PROVIDER_ID` |
1370
1620
| Email and password| ` firebase.auth.EmailAuthProvider.PROVIDER_ID` |
1371
1621
| Anonymous | ` firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID` |
1622
+ | Microsoft | ` microsoft.com` |
1623
+ | Yahoo | ` yahoo.com` |
1624
+ | SAML (GCIP only) | ` saml.*********` |
1625
+ | OIDC (GCIP only) | ` oidc.*********` |
1372
1626
1373
1627
### Setup and Usage
1374
1628
0 commit comments