Merge pull request #1190 from firebase/@invertase/align-react

Author: Ehesp

examples/react/lib/firebase/ui.tsx

@@ -15,7 +15,7 @@
  */
 
 import { NavLink } from "react-router";
-import { useUser } from "../lib/firebase/hooks";
+import { useUser } from "./firebase/hooks";
 
 function App() {
   const user = useUser();

examples/react/src/App.css

@@ -19,7 +19,7 @@
 import { NavLink } from "react-router";
 import { useUser } from "../firebase/hooks";
 import { signOut, type User } from "firebase/auth";
-import { auth } from "../firebase/clientApp";
+import { auth } from "../firebase/firebase";
 
 export function Header() {
   const user = useUser();

examples/react/src/App.jsx renamed to examples/react/src/App.tsx

@@ -19,7 +19,7 @@ import { useState } from "react";
 import { onAuthStateChanged } from "firebase/auth";
 import { User } from "firebase/auth";
 import { useEffect } from "react";
-import { auth } from "./clientApp";
+import { auth } from "./firebase";
 
 export function useUser(initalUser?: User | null) {
   const [user, setUser] = useState<User | null>(initalUser ?? null);

examples/react/src/assets/react.svg

@@ -15,7 +15,7 @@
  */
 
 @import "tailwindcss";
-@import "@firebase-ui/styles/src/base.css";
+@import "@firebase-ui/styles/tailwind";
 
 /* @import "@firebase-ui/styles/src/themes/dark.css"; */
 /* @import "@firebase-ui/styles/src/themes/brutalist.css"; */

examples/react/lib/components/header.tsx renamed to examples/react/src/components/header.tsx

@@ -14,14 +14,15 @@
  * limitations under the License.
  */
 
-import { BrowserRouter, RouterProvider, Routes, Route } from "react-router";
+import { BrowserRouter, Routes, Route } from "react-router";
 
-import React from "react";
 import ReactDOM from "react-dom/client";
+import { FirebaseUIProvider } from "@firebase-ui/react";
+
+import { ui } from "./firebase/firebase";
 
 import App from "./App";
-import { Header } from "../lib/components/header";
-import { FirebaseUIProvider } from "../lib/firebase/ui";
+import { Header } from "./components/header";
 
 /** Sign In */
 import SignInAuthScreenPage from "./screens/sign-in-auth-screen";
@@ -44,14 +45,20 @@ import SignUpAuthScreenWithOAuthPage from "./screens/sign-up-auth-screen";
 import OAuthScreenPage from "./screens/oauth-screen";
 
 /** Password Reset */
-import PasswordResetScreenPage from "./screens/password-reset-screen";
+import ForgotPasswordPage from "./screens/forgot-password-screen";
 
-const root = document.getElementById("root");
+const root = document.getElementById("root")!;
 
 ReactDOM.createRoot(root).render(
   <BrowserRouter>
     <Header />
-    <FirebaseUIProvider>
+    <FirebaseUIProvider
+      ui={ui}
+      policies={{
+        termsOfServiceUrl: "https://www.google.com",
+        privacyPolicyUrl: "https://www.google.com",
+      }}
+    >
       <Routes>
         <Route path="/" element={<App />} />
         <Route path="/screens/sign-in-auth-screen" element={<SignInAuthScreenPage />} />
@@ -64,7 +71,7 @@ ReactDOM.createRoot(root).render(
         <Route path="/screens/sign-up-auth-screen" element={<SignUpAuthScreenPage />} />
         <Route path="/screens/sign-up-auth-screen-w-oauth" element={<SignUpAuthScreenWithOAuthPage />} />
         <Route path="/screens/oauth-screen" element={<OAuthScreenPage />} />
-        <Route path="/screens/password-reset-screen" element={<PasswordResetScreenPage />} />
+        <Route path="/screens/forgot-password-screen" element={<ForgotPasswordPage />} />
       </Routes>
     </FirebaseUIProvider>
   </BrowserRouter>