@frank-auth/react
Version:
Flexible and customizable React UI components for Frank Authentication
284 lines (283 loc) • 7.61 kB
JavaScript
import { useState as y, useMemo as P, useCallback as o, useEffect as M } from "react";
import { useAuth as $ } from "./use-auth.js";
import { useConfig as q } from "../provider/config-provider.js";
const w = {
google: {
name: "Google",
displayName: "Google",
icon: "🔴",
color: "#4285f4",
defaultScopes: ["openid", "profile", "email"]
},
microsoft: {
name: "Microsoft",
displayName: "Microsoft",
icon: "🟦",
color: "#00a1f1",
defaultScopes: ["openid", "profile", "email"]
},
github: {
name: "GitHub",
displayName: "GitHub",
icon: "⚫",
color: "#333333",
defaultScopes: ["user:email"]
},
apple: {
name: "Apple",
displayName: "Apple",
icon: "🍎",
color: "#000000",
defaultScopes: ["name", "email"]
},
facebook: {
name: "Facebook",
displayName: "Facebook",
icon: "🔵",
color: "#1877f2",
defaultScopes: ["email", "public_profile"]
},
twitter: {
name: "Twitter",
displayName: "Twitter",
icon: "🐦",
color: "#1da1f2",
defaultScopes: ["users.read", "tweet.read"]
},
linkedin: {
name: "LinkedIn",
displayName: "LinkedIn",
icon: "🔵",
color: "#0077b5",
defaultScopes: ["r_liteprofile", "r_emailaddress"]
},
discord: {
name: "Discord",
displayName: "Discord",
icon: "🎮",
color: "#5865f2",
defaultScopes: ["identify", "email"]
}
};
function I() {
const { user: t, activeOrganization: p, reload: l, sdk: a } = $(), { features: g } = q(), [m, k] = y([]), [S, c] = y(!1), [b, h] = y(null), s = P(() => g.oauth, [g.oauth]), u = o((e) => {
const r = {
code: e.code || "UNKNOWN_ERROR",
message: e.message || "An unknown error occurred",
details: e.details,
field: e.field
};
throw h(r), r;
}, []), d = o(async () => {
if (s)
try {
c(!0), h(null);
const e = await a.auth.getOAuthProviders();
k(e);
} catch (e) {
console.error("Failed to load OAuth providers:", e), h({
code: "OAUTH_PROVIDERS_LOAD_FAILED",
message: "Failed to load OAuth providers"
});
} finally {
c(!1);
}
}, [a.auth, s]);
M(() => {
d();
}, [d]);
const f = o(async (e, r) => {
if (!s) throw new Error("OAuth not available");
try {
const i = {
provider: e,
redirectUrl: r?.redirectUrl || `${window.location.origin}/auth/callback`,
scopes: r?.scopes,
state: r?.state,
prompt: r?.prompt,
organizationId: r?.organizationId || p?.id,
connection: r?.connection
};
return (await a.auth.initiateSSOLogin(i)).authUrl;
} catch (i) {
return u(i), "";
}
}, [a.auth, s, p, u]), n = o(async (e, r) => {
if (!s) throw new Error("OAuth not available");
try {
c(!0), h(null);
const i = await f(e, r);
window.location.href = i;
} catch (i) {
u(i);
} finally {
c(!1);
}
}, [f, s, u]), v = o(async (e, r, i) => {
if (!s) throw new Error("OAuth not available");
try {
c(!0), h(null);
const A = {
provider: e,
code: r || new URLSearchParams(window.location.search).get("code") || "",
state: i || new URLSearchParams(window.location.search).get("state") || ""
}, O = await a.auth.handleSSOCallback(A);
return O.success ? (await l(), {
success: !0,
user: O.user,
session: O.session
}) : {
success: !1,
error: O.error || "OAuth authentication failed"
};
} catch (A) {
return {
success: !1,
error: A.message || "OAuth callback failed"
};
} finally {
c(!1);
}
}, [a.auth, s, l]), E = o(async (e, r) => {
if (!t) throw new Error("User not authenticated");
if (!s) throw new Error("OAuth not available");
try {
c(!0), h(null);
const i = await f(e, {
...r,
state: `connect:${e}:${t.id}`
});
window.location.href = i;
} catch (i) {
u(i);
} finally {
c(!1);
}
}, [t, f, s, u]), R = o(async (e) => {
if (!t) throw new Error("User not authenticated");
if (!s) throw new Error("OAuth not available");
try {
c(!0), h(null), await a.auth.disconnectOAuthProvider(e), await l();
} catch (r) {
u(r);
} finally {
c(!1);
}
}, [a.auth, t, s, l, u]), C = o((e) => t?.connectedAccounts ? t.connectedAccounts.some((r) => r.provider === e) : !1, [t]), L = o((e) => m.find((r) => r.name === e) || null, [m]), U = o((e) => n("google", {
scopes: w.google.defaultScopes,
...e
}), [n]), W = o((e) => n("microsoft", {
scopes: w.microsoft.defaultScopes,
...e
}), [n]), _ = o((e) => n("github", {
scopes: w.github.defaultScopes,
...e
}), [n]), D = o((e) => n("apple", {
scopes: w.apple.defaultScopes,
...e
}), [n]), F = o((e) => n("facebook", {
scopes: w.facebook.defaultScopes,
...e
}), [n]), G = o((e) => n("twitter", {
scopes: w.twitter.defaultScopes,
...e
}), [n]), H = o((e) => n("linkedin", {
scopes: w.linkedin.defaultScopes,
...e
}), [n]), T = o((e) => n("discord", {
scopes: w.discord.defaultScopes,
...e
}), [n]), z = o(async () => {
await d();
}, [d]);
return {
// OAuth state
providers: m,
isLoading: S,
error: b,
// OAuth authentication
signInWithProvider: n,
handleCallback: v,
// Provider management
connectProvider: E,
disconnectProvider: R,
// Provider information
isProviderConnected: C,
getProviderInfo: L,
// Common providers
signInWithGoogle: U,
signInWithMicrosoft: W,
signInWithGitHub: _,
signInWithApple: D,
signInWithFacebook: F,
signInWithTwitter: G,
signInWithLinkedIn: H,
signInWithDiscord: T,
// Utility methods
refreshProviders: z,
getAuthUrl: f
};
}
function N(t) {
const {
signInWithProvider: p,
connectProvider: l,
disconnectProvider: a,
isProviderConnected: g,
getProviderInfo: m,
isLoading: k,
error: S
} = I(), c = P(() => w[t], [t]), b = P(() => m(t), [m, t]), h = P(() => g(t), [g, t]), s = o((f) => p(t, {
scopes: c.defaultScopes,
...f
}), [p, t, c.defaultScopes]), u = o((f) => l(t, f), [l, t]), d = o(() => a(t), [a, t]);
return {
provider: c,
providerInfo: b,
isConnected: h,
signIn: s,
connect: u,
disconnect: d,
isLoading: k,
error: S,
isEnabled: !!b?.enabled
};
}
function j() {
const { handleCallback: t } = I(), [p, l] = y("idle"), [a, g] = y(null);
return {
processCallback: o(async (k, S, c) => {
const b = new URLSearchParams(window.location.search), h = k || b.get("provider") || "google", s = S || b.get("code") || "", u = c || b.get("state") || "";
if (!s) {
l("error"), g({
success: !1,
error: "No authorization code received"
});
return;
}
try {
l("processing");
const d = await t(h, s, u);
return g(d), l(d.success ? "success" : "error"), d;
} catch (d) {
const f = {
success: !1,
error: d.message || "OAuth callback failed"
};
return g(f), l("error"), f;
}
}, [t]),
state: p,
result: a,
isProcessing: p === "processing",
isSuccess: p === "success",
isError: p === "error"
};
}
export {
w as OAUTH_PROVIDERS,
I as useOAuth,
j as useOAuthCallback,
N as useOAuthProvider
};
//# sourceMappingURL=use-oauth.js.map