Merge pull request #1217 from firebase/@invertase/brands

Author: Ehesp

examples/react/src/firebase/config.ts

@@ -15,5 +15,10 @@
  */
 
 export const firebaseConfig = {
-  // your Firebase config here
+  apiKey: "AIzaSyCvMftIUCD9lUQ3BzIrimfSfBbCUQYZf-I",
+  authDomain: "fir-ui-rework.firebaseapp.com",
+  projectId: "fir-ui-rework",
+  storageBucket: "fir-ui-rework.firebasestorage.app",
+  messagingSenderId: "200312857118",
+  appId: "1:200312857118:web:94e3f69b0e0a4a863f040f",
 };

examples/react/src/index.css

@@ -18,4 +18,4 @@
 @import "@firebase-ui/styles/tailwind";
 
 /* @import "@firebase-ui/styles/src/themes/dark.css"; */
-/* @import "@firebase-ui/styles/src/themes/brutalist.css"; */
+/* @import "@firebase-ui/styles/src/themes/brutalist.css"; */

examples/react/src/screens/oauth-screen.tsx

@@ -16,12 +16,25 @@
 
 "use client";
 
-import { GoogleSignInButton, OAuthScreen } from "@firebase-ui/react";
+import {
+  FacebookSignInButton,
+  AppleSignInButton,
+  GitHubSignInButton,
+  GoogleSignInButton,
+  MicrosoftSignInButton,
+  OAuthScreen,
+  TwitterSignInButton,
+} from "@firebase-ui/react";
 
 export default function OAuthScreenPage() {
   return (
     <OAuthScreen>
-      <GoogleSignInButton />
+      <GoogleSignInButton themed="neutral" />
+      <FacebookSignInButton themed />
+      <AppleSignInButton themed />
+      <GitHubSignInButton themed />
+      <MicrosoftSignInButton themed />
+      <TwitterSignInButton themed />
     </OAuthScreen>
   );
 }

examples/react/src/screens/sign-in-auth-screen-w-oauth.tsx

@@ -16,7 +16,15 @@
 
 "use client";
 
-import { GoogleSignInButton, SignInAuthScreen } from "@firebase-ui/react";
+import {
+  AppleSignInButton,
+  GoogleSignInButton,
+  SignInAuthScreen,
+  FacebookSignInButton,
+  GitHubSignInButton,
+  MicrosoftSignInButton,
+  TwitterSignInButton,
+} from "@firebase-ui/react";
 import { useNavigate } from "react-router";
 
 export default function SignInAuthScreenWithOAuthPage() {
@@ -27,7 +35,14 @@ export default function SignInAuthScreenWithOAuthPage() {
       onForgotPasswordClick={() => navigate("/password-reset-screen")}
       onRegisterClick={() => navigate("/sign-up-auth-screen")}
     >
-      <GoogleSignInButton />
+      <div className="space-y-2">
+        <GoogleSignInButton />
+        <FacebookSignInButton />
+        <AppleSignInButton />
+        <GitHubSignInButton />
+        <MicrosoftSignInButton />
+        <TwitterSignInButton />
+      </div>
     </SignInAuthScreen>
   );
 }