@civic/auth 0.0.1-beta.2 → 0.0.1-beta.21

package/README.md

@@ -118,6 +118,32 @@ function Header() {
 }
 ```
 
+### Embedding the login iframe in your page
+
+The default displayMode for user login is 'iframe' which will show a modal containing the login page for users, when the `signIn` hook is called. If you want to customize where this page is shown and embed it into your page instead i.e. in the case where you have a landing page and don't want users to have to click on a 'sign-in' button, you can embed the login iframe directly inside your page and it will work just like in the modal, as long as it is a child of a <CivicAuthProvider>. In this mode, the iframe auto-loads the login page.
+
+To enable this mode, you need to set the parameter 'modalIframe' to `false` (it defaults to `true` in normal operation).
+
+The example below shows the iframe centered inside a div embedded on the page:
+```tsx
+import { CivicAuthProvider } from "@civic/auth/react";
+
+function App({ children }) {
+  return (
+    <CivicAuthProvider
+      clientId="your-client-id"
+      redirectUrl="https://your-app.com/callback"
+      modalIframe={false}
+    >
+      {children}
+      <div className="flex min-h-[200px] items-center justify-center">
+        <CivicAuthIframeContainer />
+      </div>
+    </CivicAuthProvider>
+  );
+}
+```
+
 ### Token Management with useToken Hook
 
 The `useToken` hook can be used to access and manage tokens within your application. This hook provides the current access and ID tokens, a refresh function, and token loading/error states.

package/dist/AuthProvider-Bj_Prt1x.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import { C as Config, S as SessionData } from './types-HdCjGldB.js';
+
+interface PKCEConsumer {
+    getCodeChallenge(): Promise<string>;
+}
+
+type AuthProviderProps = {
+    children: ReactNode;
+    clientId: string;
+    redirectUrl?: string;
+    nonce?: string;
+    config?: Config;
+    onSignIn?: (error?: Error) => void;
+    onSignOut?: () => Promise<void>;
+    pkceConsumer?: PKCEConsumer;
+    modalIframe?: boolean;
+    sessionData?: SessionData;
+};
+
+export type { AuthProviderProps as A };

package/dist/AuthProvider-DUAoX4G9.d.mts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import { C as Config, S as SessionData } from './types-HdCjGldB.mjs';
+
+interface PKCEConsumer {
+    getCodeChallenge(): Promise<string>;
+}
+
+type AuthProviderProps = {
+    children: ReactNode;
+    clientId: string;
+    redirectUrl?: string;
+    nonce?: string;
+    config?: Config;
+    onSignIn?: (error?: Error) => void;
+    onSignOut?: () => Promise<void>;
+    pkceConsumer?: PKCEConsumer;
+    modalIframe?: boolean;
+    sessionData?: SessionData;
+};
+
+export type { AuthProviderProps as A };

package/dist/UserProvider-CMLaYOUD.d.ts

@@ -0,0 +1,16 @@
+import { JWT } from 'oslo/jwt';
+import { D as DisplayMode, U as User } from './types-HdCjGldB.js';
+
+type AuthContextType = {
+    signIn: (displayMode?: DisplayMode) => Promise<void>;
+    isAuthenticated: boolean;
+    isLoading: boolean;
+    error: Error | null;
+    signOut: () => Promise<void>;
+};
+
+type UserContextType<T extends Record<string, unknown> & JWT["payload"] = Record<string, unknown> & JWT["payload"]> = {
+    user: User<T> | null;
+} & Omit<AuthContextType, "isAuthenticated">;
+
+export type { AuthContextType as A, UserContextType as U };

package/dist/UserProvider-Cbm8MZkJ.d.mts

@@ -0,0 +1,16 @@
+import { JWT } from 'oslo/jwt';
+import { D as DisplayMode, U as User } from './types-HdCjGldB.mjs';
+
+type AuthContextType = {
+    signIn: (displayMode?: DisplayMode) => Promise<void>;
+    isAuthenticated: boolean;
+    isLoading: boolean;
+    error: Error | null;
+    signOut: () => Promise<void>;
+};
+
+type UserContextType<T extends Record<string, unknown> & JWT["payload"] = Record<string, unknown> & JWT["payload"]> = {
+    user: User<T> | null;
+} & Omit<AuthContextType, "isAuthenticated">;
+
+export type { AuthContextType as A, UserContextType as U };