Skip to content

Commit f8241c4

Browse files
dackers86dackers86
committed
chore(*): merged latest
2 parents bb2ae71 + cf90b5c commit f8241c4

19 files changed

+375
-107
lines changed

‎examples/react/src/index.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,5 +18,13 @@
1818
@custom-variant dark (&:where(.dark, .dark *));
1919
@import "@invertase/firebaseui-styles/tailwind";
2020

21+
.fui-provider__button[data-provider="oidc.line"][data-themed="true"] {
22+
--line-primary: #07B53B;
23+
--color-primary: var(--line-primary);
24+
--color-primary-hover: --alpha(var(--line-primary) / 85%);
25+
--color-primary-surface: #FFFFFF;
26+
--color-border: var(--line-primary);
27+
}
28+
2129
/* @import "@invertase/firebaseui-styles/src/themes/dark.css"; */
2230
/* @import "@invertase/firebaseui-styles/src/themes/brutalist.css"; */

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,9 @@
1515
*/
1616

1717
import { useState } from "react";
18+
import { OAuthProvider } from "firebase/auth";
1819
import {
20+
OAuthButton,
1921
FacebookSignInButton,
2022
AppleSignInButton,
2123
GitHubSignInButton,
@@ -37,6 +39,7 @@ export default function OAuthScreenPage() {
3739
<GitHubSignInButton themed={themed} />
3840
<MicrosoftSignInButton themed={themed} />
3941
<TwitterSignInButton themed={themed} />
42+
<LineSignInButton themed={themed} />
4043
</OAuthScreen>
4144
<div className="flex items-center gap-2 max-w-sm mx-auto mt-12">
4245
<input type="checkbox" checked={themed} onChange={() => setThemed(!themed)} />
@@ -45,3 +48,23 @@ export default function OAuthScreenPage() {
4548
</>
4649
);
4750
}
51+
52+
function LineSignInButton({ themed }: { themed?: boolean | string }) {
53+
const provider = new OAuthProvider("oidc.line");
54+
55+
return (
56+
<OAuthButton provider={provider} themed={themed}>
57+
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48">
58+
<path
59+
fill="#00c300"
60+
d="M12.5 42h23a6.5 6.5 0 0 0 6.5-6.5v-23A6.5 6.5 0 0 0 35.5 6h-23A6.5 6.5 0 0 0 6 12.5v23a6.5 6.5 0 0 0 6.5 6.5"
61+
/>
62+
<path
63+
fill="#fff"
64+
d="M37.113 22.417c0-5.865-5.88-10.637-13.107-10.637s-13.108 4.772-13.108 10.637c0 5.258 4.663 9.662 10.962 10.495.427.092 1.008.282 1.155.646.132.331.086.85.042 1.185 0 0-.153.925-.187 1.122-.057.331-.263 1.296 1.135.707s7.548-4.445 10.298-7.611h-.001c1.901-2.082 2.811-4.197 2.811-6.544m-18.238 3.49h-2.604a.69.69 0 0 1-.687-.688V20.01a.688.688 0 0 1 1.374 0v4.521h1.917a.688.688 0 0 1 0 1.376m2.693-.688a.688.688 0 1 1-1.374 0V20.01a.688.688 0 0 1 1.374 0zm6.27 0a.684.684 0 0 1-.688.688.69.69 0 0 1-.549-.275l-2.669-3.635v3.222a.689.689 0 0 1-1.376 0V20.01a.687.687 0 0 1 1.237-.412l2.67 3.635V20.01a.688.688 0 0 1 1.375 0zm4.214-3.292a.689.689 0 0 1 0 1.375h-1.917v1.23h1.917a.688.688 0 0 1 0 1.375h-2.604a.69.69 0 0 1-.687-.688v-5.208c0-.379.308-.687.687-.687h2.604a.688.688 0 1 1 0 1.374h-1.917v1.23h1.917z"
65+
/>
66+
</svg>
67+
<span>Sign in with Line</span>
68+
</OAuthButton>
69+
);
70+
}

‎examples/shadcn/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@
1212
},
1313
"dependencies": {
1414
"@hookform/resolvers": "^5.2.2",
15-
"@invertase/firebaseui-core": "*",
15+
"@invertase/firebaseui-core": "workspace:*",
1616
"@invertase/firebaseui-react": "workspace:*",
17-
"@invertase/firebaseui-styles": "*",
18-
"@invertase/firebaseui-translations": "*",
17+
"@invertase/firebaseui-styles": "workspace:*",
18+
"@invertase/firebaseui-translations": "workspace:*",
1919
"@radix-ui/react-accordion": "^1.2.12",
2020
"@radix-ui/react-alert-dialog": "^1.1.15",
2121
"@radix-ui/react-aspect-ratio": "^1.1.7",

‎examples/shadcn/src/components/email-link-auth-form.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11
"use client";
22

3+
import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
34
import type { EmailLinkAuthFormSchema } from "@invertase/firebaseui-core";
5+
import { FirebaseUIError, getTranslation } from "@invertase/firebaseui-core";
46
import {
5-
useUI,
67
useEmailLinkAuthFormAction,
7-
useEmailLinkAuthFormSchema,
88
useEmailLinkAuthFormCompleteSignIn,
9+
useEmailLinkAuthFormSchema,
10+
useUI,
911
type EmailLinkAuthFormProps,
1012
} from "@invertase/firebaseui-react";
11-
import { useForm } from "react-hook-form";
12-
import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
13-
import { FirebaseUIError, getTranslation } from "@invertase/firebaseui-core";
1413
import { useState } from "react";
14+
import { useForm } from "react-hook-form";
1515

16+
import { Policies } from "@/components/policies";
17+
import { Alert, AlertDescription } from "@/components/ui/alert";
18+
import { Button } from "@/components/ui/button";
1619
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
1720
import { Input } from "@/components/ui/input";
18-
import { Button } from "@/components/ui/button";
19-
import { Policies } from "@/components/policies";
20-
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
2121

2222
export type { EmailLinkAuthFormProps };
2323

‎examples/shadcn/src/components/multi-factor-auth-assertion-form.tsx‎

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,30 @@
11
"use client";
22

3-
import { PhoneMultiFactorGenerator, TotpMultiFactorGenerator, type MultiFactorInfo } from "firebase/auth";
4-
import { type ComponentProps, useState } from "react";
53
import { getTranslation } from "@invertase/firebaseui-core";
64
import { useUI } from "@invertase/firebaseui-react";
7-
import { useEffect } from "react";
5+
import {
6+
PhoneMultiFactorGenerator,
7+
TotpMultiFactorGenerator,
8+
type MultiFactorInfo,
9+
type UserCredential,
10+
} from "firebase/auth";
11+
import { useState, type ComponentProps } from "react";
12+
import { useMultiFactorAssertionCleanup } from "@invertase/firebaseui-react";
813

914
import { SmsMultiFactorAssertionForm } from "@/components/sms-multi-factor-assertion-form";
1015
import { TotpMultiFactorAssertionForm } from "@/components/totp-multi-factor-assertion-form";
1116
import { Button } from "@/components/ui/button";
1217

13-
export function MultiFactorAuthAssertionForm() {
18+
export type MultiFactorAuthAssertionFormProps = {
19+
onSuccess?: (credential: UserCredential) => void;
20+
};
21+
22+
export function MultiFactorAuthAssertionForm({ onSuccess }: MultiFactorAuthAssertionFormProps) {
1423
const ui = useUI();
1524
const resolver = ui.multiFactorResolver;
1625
const mfaAssertionFactorPrompt = getTranslation(ui, "prompts", "mfaAssertionFactorPrompt");
1726

18-
useEffect(() => {
19-
return () => {
20-
ui.setMultiFactorResolver();
21-
};
22-
}, []);
27+
useMultiFactorAssertionCleanup();
2328

2429
if (!resolver) {
2530
throw new Error("MultiFactorAuthAssertionForm requires a multi-factor resolver");
@@ -32,11 +37,11 @@ export function MultiFactorAuthAssertionForm() {
3237

3338
if (hint) {
3439
if (hint.factorId === PhoneMultiFactorGenerator.FACTOR_ID) {
35-
return <SmsMultiFactorAssertionForm hint={hint} />;
40+
return <SmsMultiFactorAssertionForm hint={hint} onSuccess={onSuccess} />;
3641
}
3742

3843
if (hint.factorId === TotpMultiFactorGenerator.FACTOR_ID) {
39-
return <TotpMultiFactorAssertionForm hint={hint} />;
44+
return <TotpMultiFactorAssertionForm hint={hint} onSuccess={onSuccess} />;
4045
}
4146
}
4247

‎examples/shadcn/src/components/phone-auth-form.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ import {
2222
type PhoneAuthVerifyFormSchema,
2323
} from "@invertase/firebaseui-core";
2424

25-
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
25+
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
2626
import { Input } from "@/components/ui/input";
2727
import { Button } from "@/components/ui/button";
2828
import { Policies } from "@/components/policies";
@@ -66,6 +66,7 @@ function VerifyPhoneNumberForm(props: VerifyPhoneNumberFormProps) {
6666
render={({ field }) => (
6767
<FormItem>
6868
<FormLabel>{getTranslation(ui, "labels", "verificationCode")}</FormLabel>
69+
<FormDescription>{getTranslation(ui, "prompts", "smsVerificationPrompt")}</FormDescription>
6970
<FormControl>
7071
<InputOTP maxLength={6} {...field}>
7172
<InputOTPGroup>

‎examples/shadcn/src/components/sign-up-auth-form.tsx‎

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -88,21 +88,6 @@ export function SignUpAuthForm(props: SignUpAuthFormProps) {
8888
</FormItem>
8989
)}
9090
/>
91-
{requireDisplayName ? (
92-
<FormField
93-
control={form.control}
94-
name="displayName"
95-
render={({ field }) => (
96-
<FormItem>
97-
<FormLabel>{getTranslation(ui, "labels", "displayName")}</FormLabel>
98-
<FormControl>
99-
<Input {...field} />
100-
</FormControl>
101-
<FormMessage />
102-
</FormItem>
103-
)}
104-
/>
105-
) : null}
10691
<Policies />
10792
<Button type="submit" disabled={ui.state !== "idle"}>
10893
{getTranslation(ui, "labels", "createAccount")}

‎examples/shadcn/src/components/sms-multi-factor-assertion-form.tsx‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
import { useForm } from "react-hook-form";
1515
import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
1616

17-
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
17+
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
1818
import { Button } from "@/components/ui/button";
1919
import { InputOTP, InputOTPGroup, InputOTPSlot } from "@/components/ui/input-otp";
2020

@@ -47,12 +47,14 @@ function SmsMultiFactorAssertionPhoneForm(props: SmsMultiFactorAssertionPhoneFor
4747

4848
return (
4949
<div className="space-y-4">
50-
<div>
51-
<label className="text-sm font-medium text-gray-700">{getTranslation(ui, "labels", "phoneNumber")}</label>
52-
<div className="mt-1 p-3 bg-gray-50 border rounded-md text-gray-600">
53-
{(props.hint as PhoneMultiFactorInfo).phoneNumber || "No phone number available"}
54-
</div>
55-
</div>
50+
<FormItem>
51+
<FormLabel>{getTranslation(ui, "labels", "phoneNumber")}</FormLabel>
52+
<FormDescription>
53+
{getTranslation(ui, "messages", "mfaSmsAssertionPrompt", {
54+
phoneNumber: (props.hint as PhoneMultiFactorInfo).phoneNumber || "",
55+
})}
56+
</FormDescription>
57+
</FormItem>
5658
<div className="fui-recaptcha-container" ref={recaptchaContainerRef} />
5759
<Button onClick={onSubmit} disabled={ui.state !== "idle"}>
5860
{getTranslation(ui, "labels", "sendCode")}
@@ -102,6 +104,7 @@ function SmsMultiFactorAssertionVerifyForm(props: SmsMultiFactorAssertionVerifyF
102104
render={({ field }) => (
103105
<FormItem>
104106
<FormLabel>{getTranslation(ui, "labels", "verificationCode")}</FormLabel>
107+
<FormDescription>{getTranslation(ui, "prompts", "smsVerificationPrompt")}</FormDescription>
105108
<FormControl>
106109
<InputOTP maxLength={6} {...field}>
107110
<InputOTPGroup>

‎examples/shadcn/src/components/sms-multi-factor-enrollment-form.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import {
1919
import { useForm } from "react-hook-form";
2020
import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
2121

22-
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
22+
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
2323
import { Input } from "@/components/ui/input";
2424
import { Button } from "@/components/ui/button";
2525
import { InputOTP, InputOTPGroup, InputOTPSlot } from "@/components/ui/input-otp";
@@ -136,6 +136,7 @@ export function MultiFactorEnrollmentVerifyPhoneNumberForm(props: MultiFactorEnr
136136
render={({ field }) => (
137137
<FormItem>
138138
<FormLabel>{getTranslation(ui, "labels", "verificationCode")}</FormLabel>
139+
<FormDescription>{getTranslation(ui, "prompts", "smsVerificationPrompt")}</FormDescription>
139140
<FormControl>
140141
<InputOTP maxLength={6} {...field}>
141142
<InputOTPGroup>

‎examples/shadcn/src/components/totp-multi-factor-enrollment-form.tsx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -104,13 +104,12 @@ export function MultiFactorEnrollmentVerifyTotpForm(props: MultiFactorEnrollment
104104

105105
return (
106106
<div className="space-y-4">
107-
<div className="flex justify-center">
108-
<div className="border rounded-lg p-4">
109-
<img src={qrCodeDataUrl} alt="TOTP QR Code" className="mx-auto" />
110-
<p className="text-sm text-muted-foreground text-center mt-2">
111-
{getTranslation(ui, "prompts", "mfaTotpQrCodePrompt")}
112-
</p>
113-
</div>
107+
<div className="flex flex-col gap-y-4 items-center justify-center">
108+
<img src={qrCodeDataUrl} alt="TOTP QR Code" className="mx-auto" />
109+
<code className="text-xs text-muted-foreground text-center">{props.secret.secretKey.toString()}</code>
110+
<p className="text-xs text-muted-foreground text-center">
111+
{getTranslation(ui, "prompts", "mfaTotpQrCodePrompt")}
112+
</p>
114113
</div>
115114
<Form {...form}>
116115
<form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-y-4">

0 commit comments

Comments
 (0)