@dudousxd/adonis-authkit-react 0.1.2 → 0.3.0

package/README.md

@@ -108,6 +108,32 @@ import { AuthProvider } from '@dudousxd/adonis-authkit-react'
 </AuthProvider>
 ```
 
+## 5. Config + componentes prontos
+
+Envolva a app com `<AuthkitProvider>` para configurar URLs/endpoints e use os
+hooks headless e componentes prontos:
+
+```tsx
+import '@dudousxd/adonis-authkit-react/styles.css'
+import {
+  AuthkitProvider,
+  useSignIn, useSignOut, useUser, useProfile, useSessions, useAuthorizedApps,
+  SignInButton, SignOutButton, UserButton, UserProfile, AuthorizedApps,
+} from '@dudousxd/adonis-authkit-react'
+
+<AuthkitProvider config={{ csrfToken: page.props.csrfToken }}>
+  <UserButton />
+  <UserProfile />
+  <AuthorizedApps />
+</AuthkitProvider>
+```
+
+Defaults dos endpoints apontam para as rotas reais do host-kit
+(`/auth/login`, `/account/logout`, `/account/security`, `/account/security/profile`,
+`/account/apps`, …). Numa topologia de *client app*, aponte-os para rotas locais que
+redirecionam para o IdP. Temável via CSS vars `--authkit-*`. Veja a
+[doc de React](https://...) para detalhes.
+
 ## Helpers puros
 
 Para uso fora de componentes, as funções de papéis são exportadas e livres de React:

package/build/index.d.ts

@@ -1,9 +1,56 @@
 export { useAuth } from './src/use_auth.js';
 export { AuthProvider, AuthContext } from './src/provider.js';
 export type { AuthProviderProps } from './src/provider.js';
+export { AuthkitProvider } from './src/authkit_provider.js';
+export type { AuthkitProviderProps } from './src/authkit_provider.js';
+export { AuthkitConfigContext, useAuthkitConfig, resolveConfig, buildAuthUrl, DEFAULT_CONFIG, } from './src/config.js';
+export type { AuthkitConfig, ResolvedAuthkitConfig, AuthkitEndpoints, } from './src/config.js';
+export { useSignIn } from './src/hooks/use_sign_in.js';
+export type { SignInOptions } from './src/hooks/use_sign_in.js';
+export { useSignOut } from './src/hooks/use_sign_out.js';
+export type { SignOutOptions } from './src/hooks/use_sign_out.js';
+export { useUser } from './src/hooks/use_user.js';
+export type { UseUserResult } from './src/hooks/use_user.js';
+export { useProfile } from './src/hooks/use_profile.js';
+export type { UseProfileResult, ProfileUpdate } from './src/hooks/use_profile.js';
+export { useSessions } from './src/hooks/use_sessions.js';
+export type { UseSessionsResult, AuthSession } from './src/hooks/use_sessions.js';
+export { useAuthorizedApps } from './src/hooks/use_authorized_apps.js';
+export type { UseAuthorizedAppsResult, AuthorizedApp } from './src/hooks/use_authorized_apps.js';
+export { useOrganizations } from './src/hooks/use_organizations.js';
+export type { UseOrganizationsResult, OrgEntry } from './src/hooks/use_organizations.js';
+export { useOrganization } from './src/hooks/use_organization.js';
+export type { UseOrganizationResult, ActiveOrgDetail, OrgMemberEntry } from './src/hooks/use_organization.js';
+export { useSwitchOrganization } from './src/hooks/use_switch_organization.js';
+export type { UseSwitchOrganizationResult } from './src/hooks/use_switch_organization.js';
+export { useOrgInvitations } from './src/hooks/use_org_invitations.js';
+export type { UseOrgInvitationsResult, OrgInvitationEntry } from './src/hooks/use_org_invitations.js';
+export { jsonRequest, useResource } from './src/hooks/use_resource.js';
+export type { ResourceState } from './src/hooks/use_resource.js';
+export { usePasswordStrength, heuristicScorer, } from './src/hooks/use_password_strength.js';
+export type { PasswordStrengthScore, PasswordStrengthResult, PasswordScorer, UsePasswordStrengthOptions, } from './src/hooks/use_password_strength.js';
+export { deriveInitials, currentUrl } from './src/utils.js';
 export { Authenticated, Guest } from './src/components/authenticated.js';
 export type { AuthenticatedProps, GuestProps } from './src/components/authenticated.js';
 export { Can } from './src/components/can.js';
 export type { CanProps } from './src/components/can.js';
+export { SignInButton } from './src/components/sign_in_button.js';
+export type { SignInButtonProps } from './src/components/sign_in_button.js';
+export { SignOutButton } from './src/components/sign_out_button.js';
+export type { SignOutButtonProps } from './src/components/sign_out_button.js';
+export { Avatar } from './src/components/avatar.js';
+export type { AvatarProps } from './src/components/avatar.js';
+export { UserButton } from './src/components/user_button.js';
+export type { UserButtonProps } from './src/components/user_button.js';
+export { UserProfile } from './src/components/user_profile.js';
+export type { UserProfileProps } from './src/components/user_profile.js';
+export { AuthorizedApps } from './src/components/authorized_apps.js';
+export type { AuthorizedAppsProps } from './src/components/authorized_apps.js';
+export { PasswordStrengthMeter } from './src/components/password_strength_meter.js';
+export type { PasswordStrengthMeterProps } from './src/components/password_strength_meter.js';
+export { OrganizationSwitcher } from './src/components/organization_switcher.js';
+export type { OrganizationSwitcherProps } from './src/components/organization_switcher.js';
+export { OrganizationProfile } from './src/components/organization_profile.js';
+export type { OrganizationProfileProps } from './src/components/organization_profile.js';
 export { hasGlobalRole, hasAnyGlobalRole, hasAllGlobalRoles, hasAppRole, hasAnyAppRole, hasAllAppRoles, } from './src/roles.js';
 export type { AuthUser, AuthSharedProps, AuthState } from './src/types.js';

package/build/index.js

@@ -1,5 +1,29 @@
 export { useAuth } from './src/use_auth.js';
 export { AuthProvider, AuthContext } from './src/provider.js';
+export { AuthkitProvider } from './src/authkit_provider.js';
+export { AuthkitConfigContext, useAuthkitConfig, resolveConfig, buildAuthUrl, DEFAULT_CONFIG, } from './src/config.js';
+export { useSignIn } from './src/hooks/use_sign_in.js';
+export { useSignOut } from './src/hooks/use_sign_out.js';
+export { useUser } from './src/hooks/use_user.js';
+export { useProfile } from './src/hooks/use_profile.js';
+export { useSessions } from './src/hooks/use_sessions.js';
+export { useAuthorizedApps } from './src/hooks/use_authorized_apps.js';
+export { useOrganizations } from './src/hooks/use_organizations.js';
+export { useOrganization } from './src/hooks/use_organization.js';
+export { useSwitchOrganization } from './src/hooks/use_switch_organization.js';
+export { useOrgInvitations } from './src/hooks/use_org_invitations.js';
+export { jsonRequest, useResource } from './src/hooks/use_resource.js';
+export { usePasswordStrength, heuristicScorer, } from './src/hooks/use_password_strength.js';
+export { deriveInitials, currentUrl } from './src/utils.js';
 export { Authenticated, Guest } from './src/components/authenticated.js';
 export { Can } from './src/components/can.js';
+export { SignInButton } from './src/components/sign_in_button.js';
+export { SignOutButton } from './src/components/sign_out_button.js';
+export { Avatar } from './src/components/avatar.js';
+export { UserButton } from './src/components/user_button.js';
+export { UserProfile } from './src/components/user_profile.js';
+export { AuthorizedApps } from './src/components/authorized_apps.js';
+export { PasswordStrengthMeter } from './src/components/password_strength_meter.js';
+export { OrganizationSwitcher } from './src/components/organization_switcher.js';
+export { OrganizationProfile } from './src/components/organization_profile.js';
 export { hasGlobalRole, hasAnyGlobalRole, hasAllGlobalRoles, hasAppRole, hasAnyAppRole, hasAllAppRoles, } from './src/roles.js';

package/build/src/authkit_provider.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from 'react';
+import { type AuthkitConfig } from './config.js';
+import type { AuthSharedProps } from './types.js';
+export interface AuthkitProviderProps {
+    config?: AuthkitConfig;
+    value?: AuthSharedProps['authkit'];
+    children: ReactNode;
+}
+export declare function AuthkitProvider({ config, value, children }: AuthkitProviderProps): import("react").FunctionComponentElement<import("react").ProviderProps<{
+    user: import("./types.js").AuthUser | null;
+    globalRoles: string[];
+    appRoles?: string[];
+} | undefined>> | import("react").FunctionComponentElement<import("react").ProviderProps<import("./config.js").ResolvedAuthkitConfig>>;

package/build/src/authkit_provider.js

@@ -0,0 +1,11 @@
+import { createElement } from 'react';
+import { AuthContext } from './provider.js';
+import { AuthkitConfigContext, resolveConfig } from './config.js';
+export function AuthkitProvider({ config, value, children }) {
+    const resolved = resolveConfig(config);
+    const tree = createElement(AuthkitConfigContext.Provider, { value: resolved }, children);
+    if (value !== undefined) {
+        return createElement(AuthContext.Provider, { value }, tree);
+    }
+    return tree;
+}

package/build/src/components/authorized_apps.d.ts

@@ -0,0 +1,8 @@
+export interface AuthorizedAppsProps {
+    className?: string;
+    revokeLabel?: string;
+    emptyLabel?: string;
+}
+export declare function AuthorizedApps({ className, revokeLabel, emptyLabel, }: AuthorizedAppsProps): import("react").DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement>;

package/build/src/components/authorized_apps.js

@@ -0,0 +1,26 @@
+import { createElement } from 'react';
+import { useAuthorizedApps } from '../hooks/use_authorized_apps.js';
+export function AuthorizedApps({ className, revokeLabel = 'Revogar', emptyLabel = 'Nenhum app autorizado.', }) {
+    const { data, loading, error, actions } = useAuthorizedApps();
+    if (loading && !data) {
+        return createElement('div', { className: 'authkit-apps__loading' }, 'Carregando…');
+    }
+    if (error) {
+        return createElement('p', { className: 'authkit-error', role: 'alert' }, error.message);
+    }
+    const apps = data ?? [];
+    if (apps.length === 0) {
+        return createElement('p', { className: 'authkit-apps__empty' }, emptyLabel);
+    }
+    return createElement('ul', { className: ['authkit-apps', className].filter(Boolean).join(' ') }, ...apps.map((app) => createElement('li', { key: app.clientId, className: 'authkit-apps__item' }, createElement('div', { className: 'authkit-apps__info' }, app.logoUrl
+        ? createElement('img', {
+            className: 'authkit-apps__logo',
+            src: app.logoUrl,
+            alt: '',
+        })
+        : null, createElement('span', { className: 'authkit-apps__name' }, app.name ?? app.clientId)), createElement('button', {
+        type: 'button',
+        className: 'authkit-button authkit-button--danger',
+        onClick: () => void actions.revoke(app.clientId),
+    }, revokeLabel))));
+}

package/build/src/components/avatar.d.ts

@@ -0,0 +1,22 @@
+import type { AuthUser } from '../types.js';
+export interface AvatarProps {
+    user: Pick<AuthUser, 'name' | 'email' | 'avatarUrl'>;
+    size?: number;
+    className?: string;
+}
+export declare function Avatar({ user, size, className }: AvatarProps): import("react").DetailedReactHTMLElement<{
+    className: string;
+    src: string;
+    alt: string;
+    style: {
+        width: number;
+        height: number;
+    };
+}, HTMLElement> | import("react").DetailedReactHTMLElement<{
+    className: string;
+    style: {
+        width: number;
+        height: number;
+    };
+    'aria-hidden': true;
+}, HTMLElement>;

package/build/src/components/avatar.js

@@ -0,0 +1,15 @@
+import { createElement } from 'react';
+import { deriveInitials } from '../utils.js';
+export function Avatar({ user, size = 36, className }) {
+    const cls = ['authkit-avatar', className].filter(Boolean).join(' ');
+    const style = { width: size, height: size };
+    if (user.avatarUrl) {
+        return createElement('img', {
+            className: cls,
+            src: user.avatarUrl,
+            alt: user.name ?? user.email ?? '',
+            style,
+        });
+    }
+    return createElement('span', { className: cls, style, 'aria-hidden': true }, deriveInitials(user.name, user.email));
+}

package/build/src/components/organization_profile.d.ts

@@ -0,0 +1,8 @@
+export interface OrganizationProfileProps {
+    inviteLabel?: string;
+    leaveLabel?: string;
+    className?: string;
+}
+export declare function OrganizationProfile({ inviteLabel, leaveLabel, className, }: OrganizationProfileProps): import("react").DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement> | null;

package/build/src/components/organization_profile.js

@@ -0,0 +1,87 @@
+import { createElement, useState } from 'react';
+import { useOrganizations } from '../hooks/use_organizations.js';
+import { useOrganization } from '../hooks/use_organization.js';
+import { useAuth } from '../use_auth.js';
+import { useAuthkitConfig } from '../config.js';
+import { jsonRequest } from '../hooks/use_resource.js';
+export function OrganizationProfile({ inviteLabel = 'Convidar membro', leaveLabel = 'Sair da organização', className, }) {
+    const { isAuthenticated } = useAuth();
+    const config = useAuthkitConfig();
+    const { activeOrgId, actions: orgListActions } = useOrganizations();
+    const { data: org, loading, error, actions } = useOrganization(activeOrgId);
+    const [inviteEmail, setInviteEmail] = useState('');
+    const [inviteRole, setInviteRole] = useState('member');
+    const [inviteLoading, setInviteLoading] = useState(false);
+    const [inviteError, setInviteError] = useState(null);
+    if (!isAuthenticated || !activeOrgId)
+        return null;
+    if (loading)
+        return createElement('div', { className: 'authkit-org-profile__loading' }, 'Carregando…');
+    if (error)
+        return createElement('div', { className: 'authkit-error' }, error.message);
+    if (!org)
+        return null;
+    const base = config.endpoints.orgs.replace('/json', '');
+    const handleInvite = async (e) => {
+        e.preventDefault();
+        if (!inviteEmail.trim())
+            return;
+        setInviteLoading(true);
+        setInviteError(null);
+        try {
+            await jsonRequest(`${base}/${encodeURIComponent(activeOrgId)}/invite`, {
+                method: 'POST',
+                body: JSON.stringify({ email: inviteEmail.trim(), role: inviteRole }),
+                csrfToken: config.csrfToken,
+            });
+            setInviteEmail('');
+            await actions.refetch();
+        }
+        catch (err) {
+            setInviteError(err);
+        }
+        finally {
+            setInviteLoading(false);
+        }
+    };
+    const handleLeave = async () => {
+        try {
+            await jsonRequest(`${base}/${encodeURIComponent(activeOrgId)}/leave`, {
+                method: 'POST',
+                csrfToken: config.csrfToken,
+            });
+            await orgListActions.refetch();
+        }
+        catch {
+        }
+    };
+    const memberList = createElement('div', { className: 'authkit-org-profile__members' }, createElement('h3', { className: 'authkit-org-profile__section-title' }, 'Membros'), ...(org.members.length === 0
+        ? [createElement('p', { className: 'authkit-org-profile__empty' }, 'Nenhum membro.')]
+        : org.members.map((m) => createElement('div', { key: m.accountId, className: 'authkit-org-profile__member' }, createElement('div', { className: 'authkit-org-profile__member-info' }, createElement('span', { className: 'authkit-org-profile__member-email' }, m.email ?? m.accountId), createElement('span', { className: 'authkit-org-profile__member-role' }, m.role))))));
+    const inviteForm = org.canManage
+        ? createElement('form', { className: 'authkit-org-profile__invite-form', onSubmit: handleInvite }, createElement('h3', { className: 'authkit-org-profile__section-title' }, inviteLabel), createElement('input', {
+            className: 'authkit-input',
+            type: 'email',
+            placeholder: 'Email',
+            value: inviteEmail,
+            onChange: (e) => setInviteEmail(e.target.value),
+        }), createElement('input', {
+            className: 'authkit-input',
+            placeholder: 'Papel (ex: member)',
+            value: inviteRole,
+            onChange: (e) => setInviteRole(e.target.value),
+        }), inviteError
+            ? createElement('p', { className: 'authkit-error', role: 'alert' }, inviteError.message)
+            : null, createElement('button', {
+            type: 'submit',
+            className: 'authkit-button authkit-button--primary',
+            disabled: inviteLoading,
+        }, inviteLoading ? 'Enviando…' : inviteLabel))
+        : null;
+    const leaveButton = createElement('button', {
+        type: 'button',
+        className: 'authkit-button authkit-button--danger',
+        onClick: handleLeave,
+    }, leaveLabel);
+    return createElement('div', { className: ['authkit-card', 'authkit-org-profile', className].filter(Boolean).join(' ') }, createElement('div', { className: 'authkit-org-profile__header' }, createElement('div', { className: 'authkit-org-profile__name' }, org.name), createElement('div', { className: 'authkit-org-profile__slug' }, org.slug)), memberList, inviteForm, leaveButton);
+}

package/build/src/components/organization_switcher.d.ts

@@ -0,0 +1,7 @@
+export interface OrganizationSwitcherProps {
+    personalAccountLabel?: string;
+    className?: string;
+}
+export declare function OrganizationSwitcher({ personalAccountLabel, className, }: OrganizationSwitcherProps): import("react").DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement> | null;

package/build/src/components/organization_switcher.js

@@ -0,0 +1,57 @@
+import { createElement, useState } from 'react';
+import { useOrganizations } from '../hooks/use_organizations.js';
+import { useSwitchOrganization } from '../hooks/use_switch_organization.js';
+import { useAuth } from '../use_auth.js';
+export function OrganizationSwitcher({ personalAccountLabel = 'Conta pessoal', className, }) {
+    const { isAuthenticated } = useAuth();
+    const { data: orgs, activeOrgId, supported } = useOrganizations();
+    const { activate, deactivate, loading: switching } = useSwitchOrganization();
+    const [open, setOpen] = useState(false);
+    if (!isAuthenticated || !supported)
+        return null;
+    const activeOrg = orgs?.find((o) => o.id === activeOrgId) ?? null;
+    const label = activeOrg ? activeOrg.name : personalAccountLabel;
+    const trigger = createElement('button', {
+        type: 'button',
+        className: 'authkit-orgswitcher__trigger',
+        'aria-haspopup': 'listbox',
+        'aria-expanded': open,
+        disabled: switching,
+        onClick: () => setOpen((v) => !v),
+    }, createElement('span', { className: 'authkit-orgswitcher__label' }, label), createElement('span', { className: 'authkit-orgswitcher__chevron', 'aria-hidden': 'true' }, '▾'));
+    const menu = open
+        ? createElement('div', { className: 'authkit-orgswitcher__menu', role: 'listbox' }, createElement('button', {
+            type: 'button',
+            className: [
+                'authkit-orgswitcher__item',
+                !activeOrgId ? 'authkit-orgswitcher__item--active' : '',
+            ]
+                .filter(Boolean)
+                .join(' '),
+            role: 'option',
+            'aria-selected': !activeOrgId,
+            onClick: async () => {
+                setOpen(false);
+                if (activeOrgId)
+                    await deactivate();
+            },
+        }, createElement('span', { className: 'authkit-orgswitcher__item-name' }, personalAccountLabel)), ...(orgs ?? []).map((org) => createElement('button', {
+            key: org.id,
+            type: 'button',
+            className: [
+                'authkit-orgswitcher__item',
+                org.isActive ? 'authkit-orgswitcher__item--active' : '',
+            ]
+                .filter(Boolean)
+                .join(' '),
+            role: 'option',
+            'aria-selected': org.isActive,
+            onClick: async () => {
+                setOpen(false);
+                if (!org.isActive)
+                    await activate(org.id);
+            },
+        }, createElement('span', { className: 'authkit-orgswitcher__item-name' }, org.name), createElement('span', { className: 'authkit-orgswitcher__item-role' }, org.role))))
+        : null;
+    return createElement('div', { className: ['authkit-orgswitcher', className].filter(Boolean).join(' ') }, trigger, menu);
+}

package/build/src/components/password_strength_meter.d.ts

@@ -0,0 +1,11 @@
+import { type PasswordScorer } from '../hooks/use_password_strength.js';
+export interface PasswordStrengthMeterProps {
+    password: string;
+    scorer?: PasswordScorer;
+    showFeedback?: boolean;
+    labels?: [string, string, string, string, string];
+    className?: string;
+}
+export declare function PasswordStrengthMeter({ password, scorer, showFeedback, labels, className, }: PasswordStrengthMeterProps): import("react").DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement>;

package/build/src/components/password_strength_meter.js

@@ -0,0 +1,39 @@
+import { createElement } from 'react';
+import { usePasswordStrength, } from '../hooks/use_password_strength.js';
+const DEFAULT_LABELS = [
+    'Very weak',
+    'Weak',
+    'Fair',
+    'Good',
+    'Strong',
+];
+export function PasswordStrengthMeter({ password, scorer, showFeedback = true, labels = DEFAULT_LABELS, className, }) {
+    const { score, feedback } = usePasswordStrength(password, { scorer });
+    const cls = ['authkit-strength', className].filter(Boolean).join(' ');
+    const segments = [0, 1, 2, 3].map((i) => createElement('span', {
+        key: i,
+        className: [
+            'authkit-strength__segment',
+            i < score ? 'authkit-strength__segment--filled' : '',
+        ]
+            .filter(Boolean)
+            .join(' '),
+    }));
+    const children = [
+        createElement('div', {
+            key: 'bar',
+            className: 'authkit-strength__bar',
+            role: 'meter',
+            'aria-valuemin': 0,
+            'aria-valuemax': 4,
+            'aria-valuenow': score,
+            'aria-label': labels[score],
+            'data-score': score,
+        }, segments),
+        createElement('span', { key: 'label', className: 'authkit-strength__label' }, labels[score]),
+    ];
+    if (showFeedback && feedback && feedback.length > 0) {
+        children.push(createElement('ul', { key: 'feedback', className: 'authkit-strength__feedback' }, feedback.map((tip, i) => createElement('li', { key: i }, tip))));
+    }
+    return createElement('div', { className: cls }, children);
+}