আপনার পছন্দের ভাষায় কন্টেন্ট অনুবাদ করতে Google তার AI প্রযুক্তি ব্যবহার করে। AI-এর মাধ্যমে করা অনুবাদে ভুল থাকতে পারে।

FirebaseUI-এর সাহায্যে আপনার ওয়েব অ্যাপে সহজেই সাইন-ইন করার সুবিধা যোগ করা

FirebaseUI for Web হল Firebase Authentication JavaScript SDK-এর উপর ভিত্তি করে তৈরি লাইব্রেরির একটি সেট যা আপনাকে দ্রুত যাচাইকরণ ফ্লো শিপ করতে সাহায্য করে।

ওয়েবের জন্য FirebaseUI এইসব সুবিধা প্রদান করে:

initializeApp(...) ও বর্তমান Firebase JS SDK-এর সাথে আধুনিক মডুলার SDK কাজ করে।
একটি মনোলিথিক উইজেটের পরিবর্তে কম্পোজ করা যায় এমন স্ক্রিন, ফর্ম ও বোতাম।
React, Shadcn ও Angular-এর জন্য সহায়তা।
রিডাইরেক্ট বনাম পপ-আপ ফ্লো, Google One Tap, পরিচয় গোপন রেখে আপগ্রেড করা, ফোন সেটিংস এবং আরও অনেক কিছুর জন্য কনফিগার করা যায় এমন আচরণ।
@firebase-oss/ui-translations-এর মাধ্যমে স্থানীয়করণ সংক্রান্ত সহায়তা।
ইমেল/পাসওয়ার্ড, ইমেল লিঙ্ক, ফোন নম্বর যাচাইকরণ, OAuth প্রদানকারী এবং মাল্টি-ফ্যাক্টর ফ্লোয়ের জন্য বিল্ট-ইন সহায়তা।

এই নির্দেশিকা ইনস্টলেশন, ইনিশিয়ালাইজেশন, সাইন-ইন পদ্ধতি এবং React, Shadcn ও Angular অ্যাপের সাধারণ কনফিগারেশন সম্পর্কে বিস্তারিত জানায়।

শুরু করার আগে

আপনার ওয়েব অ্যাপে Firebase যোগ করুন:

Firebase কনসোলে যাচাইকরণ চালু করুন।

আপনার প্রোজেক্টে firebase আগে থেকে না থাকলে এটি ইনস্টল করুন:
```
npm install firebase
```
মডুলার Firebase JS SDK ব্যবহার করুন:
```
import { initializeApp } from 'firebase/app';

const app = initializeApp({
  /* your Firebase config */
});
```
আপনার প্ল্যাটফর্ম বেছে নিন এবং FirebaseUI ইনস্টল করুন:

shadcn/ui-এর উপর ভিত্তি করে React অ্যাপের জন্য, Firebase রেজিস্ট্রি components.json-তে যোগ করুন:
```
{
  "registries": {
    "@firebase": "https://firebaseopensource.com/r/{name}.json"
  }
}
```
এই গাইড জুড়ে ব্যবহৃত অথ কম্পোনেন্টগুলি সেই রেজিস্ট্রি থেকে উপলভ্য, যার মধ্যে sign-in-auth-screen, sign-up-auth-screen, email-link-auth-screen, oauth-screen, phone-auth-screen, google-sign-in-button, apple-sign-in-button এবং github-sign-in-button অন্তর্ভুক্ত।

তারপর, আপনি যেসব কম্পোনেন্ট ব্যবহার করতে চান সেগুলি যোগ করুন:
```
npx shadcn@latest add @firebase/sign-in-auth-screen @firebase/google-sign-in-button
```
এটি আপনার জন্য অন্তর্নিহিত React FirebaseUI নির্ভরতা ইনস্টল করে।

shadcn/ui ছাড়া React অ্যাপের জন্য, এগুলি ইনস্টল করুন:
```
npm install @firebase-oss/ui-react@beta @firebase-oss/ui-styles
```
Angular অ্যাপের জন্য, এগুলি ইনস্টল করুন:
```
npm install @angular/fire @firebase-oss/ui-angular@beta @firebase-oss/ui-core@beta @firebase-oss/ui-styles@beta
```

FirebaseUI ইনিশিয়ালাইজ করা

initializeUI(...)-এর মাধ্যমে শেয়ার করা UI স্টোর তৈরি করুন, তারপর আপনার ফ্রেমওয়ার্ক ইন্টিগ্রেশনে এটি পাস করুন।

প্রতিক্রিয়া জানান

import { initializeApp } from 'firebase/app';
import { initializeUI } from '@firebase-oss/ui-core';
import { FirebaseUIProvider } from '@firebase-oss/ui-react';

const app = initializeApp({
  /* your Firebase config */
});

const ui = initializeUI({
  app,
});

export function AppProviders({ children }: { children: React.ReactNode }) {
  return <FirebaseUIProvider ui={ui}>{children}</FirebaseUIProvider>;
}

Shadcn

Shadcn, React-এর মতো একই সেট-আপ ব্যবহার করে, কারণ এটিও @firebase-oss/ui-react আন্ডার দ্য হুড ব্যবহার করে:

import { initializeApp } from 'firebase/app';
import { initializeUI } from '@firebase-oss/ui-core';
import { FirebaseUIProvider } from '@firebase-oss/ui-react';

const app = initializeApp({
  /* your Firebase config */
});

const ui = initializeUI({
  app,
});

export function AppProviders({ children }: { children: React.ReactNode }) {
  return <FirebaseUIProvider ui={ui}>{children}</FirebaseUIProvider>;
}

এইসব কম্পোনেন্ট আপনার আগে থেকে থাকা shadcn স্টাইল ব্যবহার করে; shadcn রেজিস্ট্রি ব্যবহার করার সময় আপনি সাধারণত FirebaseUI-এর বান্ডেল করা CSS ইমপোর্ট করেন না।

Angular

import { type ApplicationConfig } from '@angular/core';
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { provideFirebaseUI } from '@firebase-oss/ui-angular';
import { initializeUI } from '@firebase-oss/ui-core';

export const appConfig: ApplicationConfig = {
  providers: [
    provideFirebaseApp(() =>
      initializeApp({
        /* your Firebase config */
      }),
    ),
    provideFirebaseUI((apps) =>
      initializeUI({
        app: apps[0],
      }),
    ),
  ],
};

স্টাইল অন্তর্ভুক্ত করুন

FirebaseUI-তে React ও Angular-এর জন্য আগে থেকেই তৈরি UI কম্পোনেন্ট আছে। কম্পোনেন্ট ব্যবহার করতে, আপনাকে সেগুলির CSS যোগ করতে হবে:

আপনি React বা Angular-এর সাথে Tailwind ব্যবহার করলে:

অন্যথায়, FirebaseUI স্টাইল অন্তর্ভুক্ত করুন:

@import '@firebase-oss/ui-styles/dist.min.css';

FirebaseUI for Web, CSS ভেরিয়েবল ওভাররাইডের মাধ্যমে কাস্টম থিমিং কাজ করে। আরও বিবরণের জন্য, থিম সংক্রান্ত ডকুমেন্টেশন দেখুন।

ব্যবহারকারীরা সাইন-ইন করার আগে, Firebase কনসোলে যাচাইকরণ -> সাইন-ইন পদ্ধতি বিকল্পে গিয়ে আপনি যে পরিষেবা প্রদানকারীকে চান তাকে চালু করুন।

ওয়েবের জন্য FirebaseUI স্ক্রিন, ফর্ম ও বোতাম ব্যবহার করে যা আপনি সরাসরি রেন্ডার করেন। এইসব ফ্লোয়ের জন্য শেয়ার করা কনফিগারেশন behaviors-এ থাকে যা initializeUI(...)-এ পাস করা হয়।

ইমেল আইডি ও পাসওয়ার্ড

Firebase কনসোলে ইমেল/পাসওয়ার্ড চালু করুন।
React-এ SignInAuthScreen বা SignUpAuthScreen, Shadcn-এ জেনারেট করা sign-in-auth-screen বা sign-up-auth-screen কম্পোনেন্ট অথবা Angular-এ fui-sign-in-auth-screen বা fui-sign-up-auth-screen রেন্ডার করুন।

ইমেল লিঙ্ক যাচাইকরণ

Firebase কনসোলে ইমেল/পাসওয়ার্ড ও ইমেল লিঙ্ক (পাসওয়ার্ড ছাড়াই সাইন-ইন) বিকল্প চালু করুন।
React-এ EmailLinkAuthScreen, Shadcn-এ জেনারেট করা email-link-auth-screen কম্পোনেন্ট অথবা Angular-এ fui-email-link-auth-screen রেন্ডার করো।
প্রয়োজন হলে মূল হেল্পার ব্যবহার করে বর্তমান URL-এর মাধ্যমে সাইন-ইন করার প্রসেস সম্পূর্ণ করুন।

import { completeEmailLinkSignIn } from '@firebase-oss/ui-core';

await completeEmailLinkSignIn(ui, window.location.href);

OAuth প্রদানকারী

ওয়েবের জন্য FirebaseUI-তে Google, Apple, Facebook, GitHub, Microsoft এবং X/Twitter-এর মতো পরিষেবা প্রদানকারীদের জন্য বিল্ট-ইন বোতাম কাজ করে।

Firebase কনসোলে পরিষেবা প্রদানকারীকে চালু করুন।
প্রয়োজন হলে, অনুমোদিত ডোমেনে আপনার অ্যাপ ডোমেন যোগ করুন।
আপনি চান এমন প্রদানকারীর বোতামের সাথে OAuthScreen রেন্ডার করুন, যেমন GoogleSignInButton, AppleSignInButton, FacebookSignInButton, GitHubSignInButton, MicrosoftSignInButton, অথবা TwitterSignInButton React-এ, আপনার অ্যাপে জেনারেট করা shadcn সমতুল্য অথবা fui-oauth-screen-এর সাথে fui-google-sign-in-button, fui-apple-sign-in-button, fui-facebook-sign-in-button, fui-github-sign-in-button, fui-microsoft-sign-in-button, অথবা Angular-এ fui-twitter-sign-in-button।

ফোন নম্বর

Firebase কনসোলে ফোন নম্বর যাচাইকরণ চালু করুন।
অনুমোদিত ডোমেন-এ আপনার অ্যাপ ডোমেন যোগ করুন।
React-এ PhoneAuthScreen বা PhoneAuthForm, Shadcn-এ জেনারেট করা phone-auth-screen বা phone-auth-form কম্পোনেন্ট অথবা Angular-এ fui-phone-auth-screen রেন্ডার করুন।

ঐচ্ছিক: অনুমোদিত দেশ, ডিফল্ট দেশ বা reCAPTCHA আচরণ কনফিগার করুন:

import {
  countryCodes,
  initializeUI,
  recaptchaVerification,
} from '@firebase-oss/ui-core';

const ui = initializeUI({
  app,
  behaviors: [
    countryCodes({
      allowedCountries: ['GB', 'US', 'FR'],
      defaultCountry: 'GB',
    }),
    recaptchaVerification({
      size: 'compact',
      theme: 'light',
    }),
  ],
});

কাস্টোমাইজেশন

behaviors-এ শেয়ার করা অনুমতির আচরণ কনফিগার করুন যা initializeUI(...)-এ পাস করা হয়েছে।

সাইন-আপ করার সময় ডিসপ্লে নাম দিতে হবে

import { initializeUI, requireDisplayName } from '@firebase-oss/ui-core';

const ui = initializeUI({
  app,
  behaviors: [requireDisplayName()],
});

পরিচয় গোপনকারী ব্যবহারকারীদের আপগ্রেড করা

সাইন-ইন করা অ্যাকাউন্টে পরিচয় গোপন করা সেশন মার্জ করতে autoUpgradeAnonymousUsers(...) ব্যবহার করুন।

import {
  autoUpgradeAnonymousUsers,
  initializeUI,
} from '@firebase-oss/ui-core';

const ui = initializeUI({
  app,
  behaviors: [
    autoUpgradeAnonymousUsers({
      async onUpgrade(ui, oldUserId, credential) {
        // Migrate or merge user data here if needed.
      },
    }),
  ],
});

মাইগ্রেশনের বিবরণ জানতে, MIGRATION.md দেখুন)।

আপনি যে অথ স্ক্রিন চান সেটি রেন্ডার করুন এবং কম্পোনেন্ট কলব্যাক বা Angular আউটপুটে সফল হওয়ার বিষয়টি ম্যানেজ করুন।

প্রতিক্রিয়া জানান

```tsx import { SignInAuthScreen } from '@firebase-oss/ui-react'; import { useNavigate } from 'react-router';

export function SignInPage() { const navigate = useNavigate();

return ( { navigate('/dashboard'); }} /> ); } ```

Shadcn

Shadcn, React-এর মতো একই রানটাইম ও ফ্লো ব্যবহার করে। একমাত্র পার্থক্য হল যে, @firebase-oss/ui-react থেকে ইমপোর্ট করার পরিবর্তে, আপনার অ্যাপ থেকে জেনারেট করা কম্পোনেন্ট ইমপোর্ট করেন:

```tsx import { SignInAuthScreen } from '@/components/sign-in-auth-screen'; import { useNavigate } from 'react-router';

export function SignInPage() { const navigate = useNavigate();

return ( { navigate('/dashboard'); }} /> ); } ```

Angular

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { SignInAuthScreenComponent } from '@firebase-oss/ui-angular';
import type { User } from '@angular/fire/auth';

@Component({
  selector: 'app-sign-in-page',
  standalone: true,
  imports: [SignInAuthScreenComponent],
  template: `
    <fui-sign-in-auth-screen (signIn)="onSignIn($event)" />
  `,
})
export class SignInPageComponent {
  constructor(private router: Router) {}

  onSignIn(user: User) {
    this.router.navigate(['/dashboard']);
  }
}

সাইন-আউট করুন

ব্যবহারকারীদের সাইন-আউট করতে, স্ট্যান্ডার্ড Firebase যাচাইকরণ সাইন-আউট API ব্যবহার করুন:

import { getAuth, signOut } from 'firebase/auth';

const auth = getAuth(app);
await signOut(auth);

এইসব আচরণ সহ পরিষেবা প্রদানকারীর সাইন-ইন ফ্লো বেছে নিন:

পপ-আপ ফ্লোয়ের জন্য providerPopupStrategy()
রিডাইরেক্ট ফ্লোয়ের জন্য providerRedirectStrategy()

পপ-আপ হল ডিফল্ট, তাই আপনাকে শুধুমাত্র স্পষ্টভাবে রিডাইরেক্ট কনফিগার করতে হবে:

import { initializeUI, providerRedirectStrategy } from '@firebase-oss/ui-core';

const ui = initializeUI({
  app,
  behaviors: [providerRedirectStrategy()],
});

OAuth বোতাম রেন্ডার করতে, আপনার প্ল্যাটফর্ম-নির্দিষ্ট স্ক্রিনে সেগুলি যোগ করুন।

প্রতিক্রিয়া জানান

import {
  GitHubSignInButton,
  GoogleSignInButton,
  OAuthScreen,
} from '@firebase-oss/ui-react';

export function OAuthPage() {
  return (
    <OAuthScreen>
      <GoogleSignInButton />
      <GitHubSignInButton />
    </OAuthScreen>
  );
}

Shadcn

import { GitHubSignInButton } from '@/components/github-sign-in-button';
import { GoogleSignInButton } from '@/components/google-sign-in-button';
import { OAuthScreen } from '@/components/oauth-screen';

export function OAuthPage() {
  return (
    <OAuthScreen>
      <GoogleSignInButton />
      <GitHubSignInButton />
    </OAuthScreen>
  );
}

Angular

import { Component } from '@angular/core';
import {
  GithubSignInButtonComponent,
  GoogleSignInButtonComponent,
  OAuthScreenComponent,
} from '@firebase-oss/ui-angular';

@Component({
  selector: 'app-oauth-page',
  standalone: true,
  imports: [
    OAuthScreenComponent,
    GoogleSignInButtonComponent,
    GithubSignInButtonComponent,
  ],
  template: `
    <fui-oauth-screen>
      <fui-google-sign-in-button />
      <fui-github-sign-in-button />
    </fui-oauth-screen>
  `,
})
export class OAuthPageComponent {}

Google One Tap

Google One Tap চালু করতে oneTapSignIn(...) আচরণ ব্যবহার করুন:

import { initializeUI, oneTapSignIn } from '@firebase-oss/ui-core';

const ui = initializeUI({
  app,
  behaviors: [
    oneTapSignIn({
      clientId: 'YOUR_GOOGLE_WEB_CLIENT_ID',
      autoSelect: false,
      cancelOnTapOutside: false,
    }),
  ],
});

Firebase কনসোলে Google সাইন-ইন চালু আছে কিনা তা নিশ্চিত করুন, তারপর Google পরিষেবা প্রদানকারীর সেটিংস থেকে ওয়েব ক্লায়েন্ট আইডি কপি করুন।

পরিষেবার শর্তাবলী ও গোপনীয়তা নীতি

প্ল্যাটফর্ম পরিষেবা প্রদানকারীর কনফিগারেশনের মাধ্যমে নীতির লিঙ্ক অ্যাটাচ করুন।

প্রতিক্রিয়া জানান

```tsx import { FirebaseUIProvider } from '@firebase-oss/ui-react';

<FirebaseUIProvider ui={ui} policies={{ termsOfServiceUrl: 'https://example.com/terms', privacyPolicyUrl: 'https://example.com/privacy', }}

{children} ; ```

Shadcn

React-এর মতো একই FirebaseUIProvider কনফিগারেশন ব্যবহার করুন।

Angular

import { type ApplicationConfig } from '@angular/core';
import { provideFirebaseUIPolicies } from '@firebase-oss/ui-angular';

export const appConfig: ApplicationConfig = {
  providers: [
    provideFirebaseUIPolicies(() => ({
      termsOfServiceUrl: 'https://example.com/terms',
      privacyPolicyUrl: 'https://example.com/privacy',
    })),
  ],
};

অনুবাদ

ওয়েবের জন্য FirebaseUI-তে @firebase-oss/ui-translations-এর মাধ্যমে লোকালাইজেশন কাজ করে।

import { initializeUI } from '@firebase-oss/ui-core';
import { registerLocale } from '@firebase-oss/ui-translations';

const enUsCustom = registerLocale('en-US', {
  labels: {
    signIn: 'Continue',
  },
});

const ui = initializeUI({
  app,
  locale: enUsCustom,
});

পরবর্তী ধাপ

সম্পূর্ণ API, আচরণ ও কম্পোনেন্ট রেফারেন্সের জন্য README.md পড়ুন।
আপনি যদি আগে থেকে থাকা কোনও অ্যাপকে FirebaseUI for Web-এ মাইগ্রেট করেন, তাহলে MIGRATION.md পড়ুন।
packages/react/README.md, packages/shadcn/README.md, এবং packages/angular/README.md-এ প্যাকেজ-নির্দিষ্ট ডকুমেন্ট দেখুন।
examples/react, examples/shadcn, এবং examples/angular-এ দেওয়া উদাহরণগুলি এক্সপ্লোর করুন।

শুরু করার আগে

FirebaseUI ইনিশিয়ালাইজ করা

প্রতিক্রিয়া জানান

Shadcn

Angular

স্টাইল অন্তর্ভুক্ত করুন

সাইন-ইন পদ্ধতি সেট-আপ করা

ইমেল আইডি ও পাসওয়ার্ড

ইমেল লিঙ্ক যাচাইকরণ

OAuth প্রদানকারী

ফোন নম্বর

কাস্টোমাইজেশন

সাইন-আপ করার সময় ডিসপ্লে নাম দিতে হবে

পরিচয় গোপনকারী ব্যবহারকারীদের আপগ্রেড করা

সাইন-ইন করুন

প্রতিক্রিয়া জানান

Shadcn

Angular

সাইন-আউট করুন

OAuth পরিষেবা প্রদানকারী: পপ-আপ বনাম রিডাইরেক্ট

প্রতিক্রিয়া জানান

Shadcn

Angular

Google One Tap

পরিষেবার শর্তাবলী ও গোপনীয়তা নীতি

প্রতিক্রিয়া জানান

Shadcn

Angular

অনুবাদ

পরবর্তী ধাপ