chore: Add line sign in button to examples

Author: Ehesp

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

@@ -15,7 +15,9 @@
  */
 
 import { useState } from "react";
+import { OAuthProvider } from "firebase/auth";
 import {
+  OAuthButton,
   FacebookSignInButton,
   AppleSignInButton,
   GitHubSignInButton,
@@ -37,6 +39,7 @@ export default function OAuthScreenPage() {
         <GitHubSignInButton themed={themed} />
         <MicrosoftSignInButton themed={themed} />
         <TwitterSignInButton themed={themed} />
+        <LineSignInButton themed={themed} />
       </OAuthScreen>
       <div className="flex items-center gap-2 max-w-sm mx-auto mt-12">
         <input type="checkbox" checked={themed} onChange={() => setThemed(!themed)} />
@@ -45,3 +48,23 @@ export default function OAuthScreenPage() {
     </>
   );
 }
+
+function LineSignInButton({ themed }: { themed?: boolean | string }) {
+  const provider = new OAuthProvider("oidc.line");
+
+  return (
+    <OAuthButton provider={provider} themed={themed}>
+      <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48">
+        <path
+          fill="#00c300"
+          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"
+        />
+        <path
+          fill="#fff"
+          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"
+        />
+      </svg>
+      <span>Sign in with Line</span>
+    </OAuthButton>
+  );
+}

examples/shadcn/src/index.css

@@ -155,6 +155,12 @@
     --primary: var(--twitter-primary);
     --primary-foreground: var(--color-white);
   }
+  button[data-provider="oidc.line"][data-themed="true"] {
+    --line-primary: #07B53B;
+    --primary: var(--line-primary);
+    --primary-foreground: var(--color-white);
+  }
+  
 }
 
 @variant dark {

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

@@ -16,6 +16,8 @@
 "use client";
 
 import { useState } from "react";
+import { OAuthProvider } from "firebase/auth";
+import { OAuthButton } from "@/components/oauth-button";
 import { GoogleSignInButton } from "@/components/google-sign-in-button";
 import { FacebookSignInButton } from "@/components/facebook-sign-in-button";
 import { AppleSignInButton } from "@/components/apple-sign-in-button";
@@ -36,6 +38,7 @@ export default function OAuthScreenPage() {
         <GitHubSignInButton themed={themed} />
         <MicrosoftSignInButton themed={themed} />
         <TwitterSignInButton themed={themed} />
+        <LineSignInButton themed={themed} />
       </OAuthScreen>
       <div className="flex items-center gap-2 max-w-sm mx-auto mt-12">
         <input type="checkbox" checked={themed} onChange={() => setThemed(!themed)} />
@@ -44,3 +47,19 @@ export default function OAuthScreenPage() {
     </>
   );
 }
+
+function LineSignInButton({ themed }: { themed?: boolean }) {
+  const provider = new OAuthProvider("oidc.line");
+
+  return (
+    <OAuthButton provider={provider} themed={themed}>
+      <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48">
+        <path
+          fill="#00c300"
+          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"
+        />
+      </svg>
+      <span>Sign in with Line</span>
+    </OAuthButton>
+  );
+}