Rename packages to @firebase-oss/ui-*

README.md

@@ -10,24 +10,15 @@ FirebaseUI requires the `firebase` package to be installed:
 npm install firebase
 ```
 
-**Note**: Since the packages are not yet published to npm, you must manually install them from GitHub releases. Once published, these steps will be simplified.
+### Framework-specific Installation
 
-###  Framework-specific Installation
-
-Packages have been created for both `React` and `Angular`. For now, they're only available as direct downloads from this repository. Add the following to your `package.json` file:
+Packages have been created for both `React` and `Angular`.
 
 <details>
   <summary>React</summary>
 
-```json
-{
-  "dependencies": {
-    "@firebase-ui/react": "https://github.com/firebase/firebaseui-web/raw/refs/heads/v7-alpha/releases/firebase-ui-react-0.0.1.tgz",
-    "@firebase-ui/core": "https://github.com/firebase/firebaseui-web/raw/refs/heads/v7-alpha/releases/firebase-ui-core-0.0.1.tgz",
-    "@firebase-ui/styles": "https://github.com/firebase/firebaseui-web/raw/refs/heads/v7-alpha/releases/firebase-ui-styles-0.0.1.tgz",
-    "@firebase-ui/translations": "https://github.com/firebase/firebaseui-web/raw/refs/heads/v7-alpha/releases/firebase-ui-translations-0.0.1.tgz"
-  }
-}
+```bash
+npm install @firebase-oss/ui-react @firebase-oss/ui-core @firebase-oss/ui-styles @firebase-oss/ui-translations
 ```
 
 </details>
@@ -37,16 +28,8 @@ Packages have been created for both `React` and `Angular`. For now, they're only
 
 FirebaseUI for Angular depends on the [AngularFire](https://github.com/angular/angularfire) package:
 
-```json
-{
-  "dependencies": {
-    "@angular/fire": "^19.1.0",
-    "@firebase-ui/angular": "https://github.com/firebase/firebaseui-web/raw/refs/heads/v7-alpha/releases/firebase-ui-angular-0.0.1.tgz",
-    "@firebase-ui/core": "https://github.com/firebase/firebaseui-web/raw/refs/heads/v7-alpha/releases/firebase-ui-core-0.0.1.tgz",
-    "@firebase-ui/styles": "https://github.com/firebase/firebaseui-web/raw/refs/heads/v7-alpha/releases/firebase-ui-styles-0.0.1.tgz",
-    "@firebase-ui/translations": "https://github.com/firebase/firebaseui-web/raw/refs/heads/v7-alpha/releases/firebase-ui-translations-0.0.1.tgz"
-  }
-}
+```bash
+npm install @angular/fire @firebase-oss/ui-angular @firebase-oss/ui-core @firebase-oss/ui-styles @firebase-oss/ui-translations
 ```
 
 </details>
@@ -63,10 +46,10 @@ import { initializeApp } from 'firebase/app';
 const app = initializeApp({ ... });
 ```
 
-Next, setup and configure FirebaseUI, import the `initializeUI` function from `@firebase-ui/core`:
+Next, setup and configure FirebaseUI, import the `initializeUI` function from `@firebase-oss/ui-core`:
 
 ```ts
-import { initializeUI } from "@firebase-ui/core";
+import { initializeUI } from "@firebase-oss/ui-core";
 
 const ui = initializeUI();
 ```
@@ -82,8 +65,8 @@ FirebaseUI for React requires that your application be wrapped in the `ConfigPro
 
 ```tsx
 import { initializeApp } from 'firebase/app';
-import { initializeUI } from "@firebase-ui/core";
-import { ConfigProvider } from '@firebase-ui/react';
+import { initializeUI } from "@firebase-oss/ui-core";
+import { ConfigProvider } from '@firebase-oss/ui-react';
 
 const app = initializeApp({ .. });
 const ui = initializeUI({ app });
@@ -107,8 +90,8 @@ FirebaseUI depends on [AngularFire](https://github.com/angular/angularfire) bein
 ```tsx
 import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
 import { provideAuth, getAuth } from '@angular/fire/auth';
-import { provideFirebaseUI } from '@firebase-ui/angular';
-import { initializeUI } from '@firebase-ui/core';
+import { provideFirebaseUI } from '@firebase-oss/ui-angular';
+import { initializeUI } from '@firebase-oss/ui-core';
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -127,17 +110,17 @@ export const appConfig: ApplicationConfig = {
 
 Next, import the CSS styles for the FirebaseUI project.
 
-If you are using [TailwindCSS](https://tailwindcss.com/), import the base CSS from the `@firebase-ui/styles` package after your Tailwind import:
+If you are using [TailwindCSS](https://tailwindcss.com/), import the base CSS from the `@firebase-oss/ui-styles` package after your Tailwind import:
 
 ```css
 @import "tailwindcss";
-@import "@firebase-ui/styles/tailwind";
+@import "@firebase-oss/ui-styles/tailwind";
 ```
 
 If you are not using Tailwind, import the distributable CSS in your project:
 
 ```css
-@import "@firebase-ui/styles";
+@import "@firebase-oss/ui-styles";
 ```
 
 To learn more about theming, view the [theming](#theming) section.
@@ -154,7 +137,7 @@ Allows users to sign in with an email and password:
   <summary>React</summary>
 
 ```tsx
-import { SignInAuthScreen } from "@firebase-ui/react";
+import { SignInAuthScreen } from "@firebase-oss/ui-react";
 
 function App() {
   return <SignInAuthScreen />;
@@ -166,7 +149,7 @@ Props: `onForgotPasswordClick` / `onRegisterClick`
 Additionally, allow the user to sign in with an OAuth provider by providing children:
 
 ```tsx
-import { SignInAuthScreen, GoogleSignInButton } from "@firebase-ui/react";
+import { SignInAuthScreen, GoogleSignInButton } from "@firebase-oss/ui-react";
 
 function App() {
   return (
@@ -183,7 +166,7 @@ function App() {
   <summary>Angular</summary>
 
 ```tsx
-import { SignUpAuthScreenComponent } from "@firebase-ui/angular";
+import { SignUpAuthScreenComponent } from "@firebase-oss/ui-angular";
 
 @Component({
   selector: "app-root",
@@ -257,7 +240,7 @@ The default values are based on the [TailwindCSS](https://tailwindcss.com/docs/t
 
 ## FirebaseUI Core Integration
 
-`@firebase-ui/core` is a framework-agnostic layer that manages the complete lifecycle of Firebase Authentication flows. It exposes a reactive store via nanostores that can be wrapped and adapted into any JavaScript framework such as React, Angular, Vue, Svelte, or SolidJS to name a few.
+`@firebase-oss/ui-core` is a framework-agnostic layer that manages the complete lifecycle of Firebase Authentication flows. It exposes a reactive store via nanostores that can be wrapped and adapted into any JavaScript framework such as React, Angular, Vue, Svelte, or SolidJS to name a few.
 
 ### What FirebaseUI Core Provides
 
@@ -278,7 +261,7 @@ The default values are based on the [TailwindCSS](https://tailwindcss.com/docs/t
 Call initializeUI() with your Firebase app and configuration options:
 
 ```js
-import { initializeUI } from '@firebase-ui/core';
+import { initializeUI } from '@firebase-oss/ui-core';
 
 const ui = initializeUI({
   app: firebaseApp,
@@ -459,7 +442,7 @@ uiStore.subscribe((ui) => {
 You can pass one or more translations to support localized strings.
 
 ```js
-import { english } from "@firebase-ui/translations";
+import { english } from "@firebase-oss/ui-translations";
 
 initializeUI({
   app,
@@ -484,7 +467,7 @@ const customFr = {
 To use a string at runtime (e.g., in an error message):
 
 ```js
-import { getTranslation } from "@firebase-ui/core";
+import { getTranslation } from "@firebase-oss/ui-core";
 
 const message = getTranslation(config, "errors", "unknownError");
 ```
@@ -507,7 +490,7 @@ Validates a sign-in or sign-up form using email and password.
 - _password_: Must be at least 8 characters.
 
 ```js
-import { createEmailFormSchema } from "@firebase-ui/core";
+import { createEmailFormSchema } from "@firebase-oss/ui-core";
 
 const schema = createEmailFormSchema(translations);
 ```

examples/angular/package.json

@@ -32,10 +32,10 @@
     "@angular/platform-server": "^20.2.2",
     "@angular/router": "^20.2.2",
     "@angular/ssr": "^20.2.2",
-    "@firebase-ui/angular": "workspace:*",
-    "@firebase-ui/core": "workspace:*",
-    "@firebase-ui/styles": "workspace:*",
-    "@firebase-ui/translations": "workspace:*",
+    "@firebase-oss/ui-angular": "workspace:*",
+    "@firebase-oss/ui-core": "workspace:*",
+    "@firebase-oss/ui-styles": "workspace:*",
+    "@firebase-oss/ui-translations": "workspace:*",
     "@tailwindcss/postcss": "^4.0.6",
     "express": "^4.18.2",
     "postcss": "^8.5.2",

examples/angular/src/app/app.config.ts

@@ -22,8 +22,8 @@ import { provideClientHydration, withEventReplay } from "@angular/platform-brows
 
 import { provideFirebaseApp, initializeApp } from "@angular/fire/app";
 import { provideAuth, getAuth, connectAuthEmulator } from "@angular/fire/auth";
-import { provideFirebaseUI, provideFirebaseUIPolicies } from "@firebase-ui/angular";
-import { initializeUI } from "@firebase-ui/core";
+import { provideFirebaseUI, provideFirebaseUIPolicies } from "@firebase-oss/ui-angular";
+import { initializeUI } from "@firebase-oss/ui-core";
 
 const firebaseConfig = {
   apiKey: "AIzaSyCvMftIUCD9lUQ3BzIrimfSfBbCUQYZf-I",

examples/angular/src/app/auth/email-link-oauth/email-link-oauth.component.ts

@@ -18,7 +18,7 @@ import { Component, type OnInit, inject } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { Router, RouterModule } from "@angular/router";
 import { Auth, type User, authState } from "@angular/fire/auth";
-import { EmailLinkAuthScreenComponent, GoogleSignInButtonComponent } from "@firebase-ui/angular";
+import { EmailLinkAuthScreenComponent, GoogleSignInButtonComponent } from "@firebase-oss/ui-angular";
 
 @Component({
   selector: "app-email-link-oauth",

examples/angular/src/app/auth/email-link/email-link.component.ts

@@ -18,7 +18,7 @@ import { Component, type OnInit, inject } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { Router, RouterModule } from "@angular/router";
 import { Auth, type User, authState } from "@angular/fire/auth";
-import { EmailLinkAuthScreenComponent } from "@firebase-ui/angular";
+import { EmailLinkAuthScreenComponent } from "@firebase-oss/ui-angular";
 
 @Component({
   selector: "app-email-link",

examples/angular/src/app/auth/forgot-password/forgot-password.component.ts

@@ -18,7 +18,7 @@ import { Component, type OnInit, inject } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { Router, RouterModule } from "@angular/router";
 import { Auth, type User, authState } from "@angular/fire/auth";
-import { ForgotPasswordAuthScreenComponent } from "@firebase-ui/angular";
+import { ForgotPasswordAuthScreenComponent } from "@firebase-oss/ui-angular";
 
 @Component({
   selector: "app-forgot-password",

examples/angular/src/app/auth/oauth/oauth.component.ts

@@ -18,7 +18,7 @@ import { Component, type OnInit, inject } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { Router, RouterModule } from "@angular/router";
 import { Auth, type User, authState } from "@angular/fire/auth";
-import { OAuthScreenComponent, GoogleSignInButtonComponent } from "@firebase-ui/angular";
+import { OAuthScreenComponent, GoogleSignInButtonComponent } from "@firebase-oss/ui-angular";
 
 @Component({
   selector: "app-oauth",

examples/angular/src/app/auth/phone-oauth/phone-oauth.component.ts

@@ -18,7 +18,7 @@ import { Component, type OnInit, inject } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { Router, RouterModule } from "@angular/router";
 import { Auth, type User, authState } from "@angular/fire/auth";
-import { PhoneAuthScreenComponent, GoogleSignInButtonComponent } from "@firebase-ui/angular";
+import { PhoneAuthScreenComponent, GoogleSignInButtonComponent } from "@firebase-oss/ui-angular";
 
 @Component({
   selector: "app-phone-oauth",

examples/angular/src/app/auth/phone/phone-screen.component.ts

@@ -18,7 +18,7 @@ import { Component, type OnInit, inject } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { Router, RouterModule } from "@angular/router";
 import { Auth, type User, authState } from "@angular/fire/auth";
-import { PhoneAuthScreenComponent } from "@firebase-ui/angular";
+import { PhoneAuthScreenComponent } from "@firebase-oss/ui-angular";
 
 @Component({
   selector: "app-phone",

examples/angular/src/app/auth/register/register.component.ts

@@ -18,7 +18,7 @@ import { Component, type OnInit, inject } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { Router, RouterModule } from "@angular/router";
 import { Auth, type User, authState } from "@angular/fire/auth";
-import { SignUpAuthScreenComponent } from "@firebase-ui/angular";
+import { SignUpAuthScreenComponent } from "@firebase-oss/ui-angular";
 
 @Component({
   selector: "app-register",

examples/angular/src/app/auth/sign-in-oauth/sign-in-oauth.component.ts

@@ -18,7 +18,7 @@ import { Component, type OnInit, inject } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { Router, RouterModule } from "@angular/router";
 import { Auth, type User, authState } from "@angular/fire/auth";
-import { SignInAuthScreenComponent, GoogleSignInButtonComponent } from "@firebase-ui/angular";
+import { SignInAuthScreenComponent, GoogleSignInButtonComponent } from "@firebase-oss/ui-angular";
 
 @Component({
   selector: "app-sign-in-oauth",

examples/angular/src/app/auth/sign-in/sign-in.component.ts

@@ -18,7 +18,7 @@ import { Component, type OnInit, inject } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { Router, RouterModule } from "@angular/router";
 import { Auth, type User, authState } from "@angular/fire/auth";
-import { SignInAuthScreenComponent, GoogleSignInButtonComponent } from "@firebase-ui/angular";
+import { SignInAuthScreenComponent, GoogleSignInButtonComponent } from "@firebase-oss/ui-angular";
 
 @Component({
   selector: "app-sign-in",

examples/angular/src/app/auth/sign-up-oauth/sign-up-oauth.component.ts

@@ -18,7 +18,7 @@ import { Component, type OnInit, inject } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { Router, RouterModule } from "@angular/router";
 import { Auth, type User, authState } from "@angular/fire/auth";
-import { SignUpAuthScreenComponent, GoogleSignInButtonComponent } from "@firebase-ui/angular";
+import { SignUpAuthScreenComponent, GoogleSignInButtonComponent } from "@firebase-oss/ui-angular";
 
 @Component({
   selector: "app-sign-up-oauth",

examples/angular/src/app/auth/sign-up/sign-up.component.ts

@@ -18,7 +18,7 @@ import { Component, type OnInit, inject } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { Router, RouterModule } from "@angular/router";
 import { Auth, type User, authState } from "@angular/fire/auth";
-import { SignUpAuthScreenComponent } from "@firebase-ui/angular";
+import { SignUpAuthScreenComponent } from "@firebase-oss/ui-angular";
 
 @Component({
   selector: "app-sign-up",

examples/angular/src/app/screens/email-link-auth-screen/email-link-auth-screen.component.ts

@@ -16,7 +16,7 @@
 
 import { Component } from "@angular/core";
 import { CommonModule } from "@angular/common";
-import { EmailLinkAuthScreenComponent } from "@firebase-ui/angular";
+import { EmailLinkAuthScreenComponent } from "@firebase-oss/ui-angular";
 
 @Component({
   selector: "app-email-link-auth-screen",

examples/angular/src/app/screens/oauth-screen/oauth-screen.component.ts

@@ -16,7 +16,7 @@
 
 import { Component } from "@angular/core";
 import { CommonModule } from "@angular/common";
-import { OAuthScreenComponent } from "@firebase-ui/angular";
+import { OAuthScreenComponent } from "@firebase-oss/ui-angular";
 
 @Component({
   selector: "app-oauth-screen",

examples/angular/src/app/screens/phone-auth-screen/phone-auth-screen.component.ts

@@ -16,7 +16,7 @@
 
 import { Component } from "@angular/core";
 import { CommonModule } from "@angular/common";
-import { PhoneAuthScreenComponent } from "@firebase-ui/angular";
+import { PhoneAuthScreenComponent } from "@firebase-oss/ui-angular";
 
 @Component({
   selector: "app-phone-auth-screen",

examples/angular/src/app/screens/sign-in-auth-screen/sign-in-auth-screen.component.ts

@@ -16,7 +16,7 @@
 
 import { Component } from "@angular/core";
 import { CommonModule } from "@angular/common";
-import { SignInAuthScreenComponent } from "@firebase-ui/angular";
+import { SignInAuthScreenComponent } from "@firebase-oss/ui-angular";
 
 @Component({
   selector: "app-sign-in-auth-screen",

examples/angular/src/app/screens/sign-up-auth-screen/sign-up-auth-screen.component.ts

@@ -16,7 +16,7 @@
 
 import { Component } from "@angular/core";
 import { CommonModule } from "@angular/common";
-import { SignUpAuthScreenComponent } from "@firebase-ui/angular";
+import { SignUpAuthScreenComponent } from "@firebase-oss/ui-angular";
 
 @Component({
   selector: "app-sign-up-auth-screen",

examples/angular/src/styles.css

@@ -16,4 +16,4 @@
 
 /* You can add global styles to this file, and also import other style files */
 @import "tailwindcss";
-@import "@firebase-ui/styles/tailwind";
+@import "@firebase-oss/ui-styles/tailwind";

examples/nextjs/app/forgot-password/screen.tsx

@@ -16,7 +16,7 @@
 
 "use client";
 
-import { PasswordResetScreen } from "@firebase-ui/react";
+import { PasswordResetScreen } from "@firebase-oss/ui-react";
 import { useRouter } from "next/navigation";
 
 export default function Screen() {

examples/nextjs/app/globals.css

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

examples/nextjs/app/register/screen.tsx

@@ -17,7 +17,7 @@
 "use client";
 
 import { useUser } from "@/lib/firebase/hooks";
-import { GoogleSignInButton, SignUpAuthScreen } from "@firebase-ui/react";
+import { GoogleSignInButton, SignUpAuthScreen } from "@firebase-oss/ui-react";
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
 

examples/nextjs/app/screens/email-link-auth-screen-w-oauth/page.tsx

@@ -16,7 +16,7 @@
 
 "use client";
 
-import { EmailLinkAuthScreen, GoogleSignInButton } from "@firebase-ui/react";
+import { EmailLinkAuthScreen, GoogleSignInButton } from "@firebase-oss/ui-react";
 
 export default function EmailLinkAuthScreenWithOAuthPage() {
   return (

examples/nextjs/app/screens/email-link-auth-screen/page.tsx

@@ -16,7 +16,7 @@
 
 "use client";
 
-import { EmailLinkAuthScreen } from "@firebase-ui/react";
+import { EmailLinkAuthScreen } from "@firebase-oss/ui-react";
 
 export default function EmailLinkAuthScreenPage() {
   return <EmailLinkAuthScreen />;