@niledatabase/react 4.0.0-alpha.9 → 4.0.1-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +71 -111
- package/dist/index.d.mts +181 -140
- package/dist/index.d.ts +181 -140
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +2 -2
- package/package.json +7 -9
package/README.md
CHANGED
|
@@ -1,143 +1,103 @@
|
|
|
1
|
-
|
|
1
|
+
<p align="center">
|
|
2
|
+
<img width="1434" alt="Screen Shot 2024-09-18 at 9 20 04 AM" src="https://github.com/user-attachments/assets/20585883-5cdc-4f15-93d3-dc150e87bc11">
|
|
3
|
+
</p>
|
|
2
4
|
|
|
3
|
-
|
|
5
|
+
---
|
|
4
6
|
|
|
5
|
-
|
|
7
|
+
# Nile's React SDK
|
|
6
8
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
In the root of your react application, add a Nile provider. This will add a [QueryClientProvider](https://tanstack.com/query/v4/docs/quick-start) and a [CssVarsProvider](https://mui.com/joy-ui/getting-started/usage/) to your application.
|
|
9
|
+
This package (`@niledatabase/react`) is part of [Nile's Javascript SDK](https://github.com/niledatabase/nile-js/tree/main).
|
|
10
10
|
|
|
11
|
-
|
|
12
|
-
import { NileProvider } from '@niledatabase/react';
|
|
13
|
-
|
|
14
|
-
function App() {
|
|
15
|
-
return (
|
|
16
|
-
<NileProvider>
|
|
17
|
-
<div>Welcome to my great app</div>
|
|
18
|
-
</NileProvider>
|
|
19
|
-
);
|
|
20
|
-
}
|
|
21
|
-
```
|
|
11
|
+
Nile's React package provides:
|
|
22
12
|
|
|
23
|
-
|
|
13
|
+
- 🎨 UI components for authentication, user management, and tenant management (customizable with Tailwind CSS)
|
|
14
|
+
- 🪝 React hooks for authentication, user management, and tenant management functionality
|
|
24
15
|
|
|
25
|
-
|
|
26
|
-
| -------- | -------- | ----------------------------------------------------------------- |
|
|
27
|
-
| tenantId | `string` | ID of the tenant associated. |
|
|
28
|
-
| appUrl | `string` | the FQDN for a service running a `@niledatabase/server`-like API. |
|
|
29
|
-
| apiUrl | `string` | the API URL of your database |
|
|
16
|
+
You can browse all the components and explore their properties in [Nile's documentation](https://www.thenile.dev/docs/auth/components/signin) or in [Storybook](https://storybook.thenile.dev).
|
|
30
17
|
|
|
31
|
-
|
|
18
|
+
The components and hooks are designed to work best and provide a secure user experience when used with the generated routes provided by [Nile's Server-Side SDK](https://www.npmjs.com/package/@niledatabase/server).
|
|
32
19
|
|
|
33
|
-
|
|
20
|
+
**Nile is a Postgres platform that decouples storage from compute, virtualizes tenants, and supports vertical and horizontal scaling globally to ship B2B applications fast while being safe with limitless scale.** All B2B applications are multi-tenant. A tenant/customer is primarily a company, an organization, or a workspace in your product that contains a group of users. A B2B application provides services to multiple tenants. Tenant is the basic building block of all B2B applications.
|
|
34
21
|
|
|
35
|
-
|
|
22
|
+
## Usage
|
|
36
23
|
|
|
37
|
-
|
|
38
|
-
import { QueryClient, QueryClientProvider } from 'react-query';
|
|
24
|
+
### Installation
|
|
39
25
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
retry: false,
|
|
44
|
-
refetchOnWindowFocus: false,
|
|
45
|
-
},
|
|
46
|
-
},
|
|
47
|
-
});
|
|
26
|
+
```bash
|
|
27
|
+
npm install @niledatabase/react
|
|
28
|
+
```
|
|
48
29
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
30
|
+
### Signup / User Info page
|
|
31
|
+
|
|
32
|
+
This example uses several components to build a one-page signup / user profile example.
|
|
33
|
+
|
|
34
|
+
- `<SignedIn>` component renders for authenticated users while `<SignedOut>` renders for un-authenticated users.
|
|
35
|
+
- `<SignUpForm>` component shows a standard email/password signup.
|
|
36
|
+
- `<UserInfo />` component shows information about currently authenticated user - their image, email, name, etc.
|
|
37
|
+
- `<TenantSelector>` component shows the current tenant, allows to switch between tenants and to create new tenants.
|
|
38
|
+
- `<SignOutButton />` component expires the current session
|
|
39
|
+
|
|
40
|
+
```tsx
|
|
41
|
+
import {
|
|
42
|
+
SignOutButton,
|
|
43
|
+
SignUpForm,
|
|
44
|
+
SignedIn,
|
|
45
|
+
SignedOut,
|
|
46
|
+
TenantSelector,
|
|
47
|
+
UserInfo,
|
|
48
|
+
} from "@niledatabase/react";
|
|
49
|
+
import "@niledatabase/react/styles.css";
|
|
50
|
+
|
|
51
|
+
export default function SignUpPage() {
|
|
52
|
+
return (
|
|
53
|
+
<div className="flex flex-col items-center justify-center min-h-screen">
|
|
54
|
+
<SignedIn className="flex flex-col gap-4">
|
|
55
|
+
<UserInfo />
|
|
56
|
+
<TenantSelector className="py-6 mb-10" />
|
|
57
|
+
<SignOutButton />
|
|
58
|
+
</SignedIn>
|
|
59
|
+
<SignedOut>
|
|
60
|
+
<SignUpForm createTenant />
|
|
61
|
+
</SignedOut>
|
|
62
|
+
</div>
|
|
63
|
+
);
|
|
61
64
|
}
|
|
62
65
|
```
|
|
63
66
|
|
|
64
|
-
###
|
|
67
|
+
### Social Login (SSO)
|
|
65
68
|
|
|
66
|
-
|
|
69
|
+
Nile-Auth supports multiple social providers. You configure and enable them in [Nile console](https://console.thenile.dev), and then simply drop-in the components. For example, for Discord authentication:
|
|
67
70
|
|
|
68
|
-
|
|
71
|
+
```tsx
|
|
72
|
+
import { DiscordSignInButton } from '@niledatabase/react';
|
|
69
73
|
|
|
70
|
-
```typescript
|
|
71
74
|
function App() {
|
|
72
75
|
return (
|
|
73
|
-
<
|
|
74
|
-
<
|
|
75
|
-
</
|
|
76
|
+
<div>
|
|
77
|
+
<DiscordSignInButton callbackUrl="/" />
|
|
78
|
+
</div>
|
|
76
79
|
);
|
|
77
80
|
}
|
|
78
81
|
```
|
|
79
82
|
|
|
80
|
-
###
|
|
81
|
-
|
|
82
|
-
A method exposing the configuration created in `<NileProvider />`. The methods on the instance can be found in [the client src readme](../../lib/nile/src/README.md), or found in the auto-complete of visual studio code.
|
|
83
|
+
### Customizing the components
|
|
83
84
|
|
|
84
|
-
|
|
85
|
+
Nile’s react package includes a CSS file that you can use to provide a nice default style to the components:
|
|
85
86
|
|
|
86
|
-
|
|
87
|
+
```ts
|
|
88
|
+
import "@niledatabase/react/styles.css";
|
|
89
|
+
```
|
|
87
90
|
|
|
88
|
-
|
|
89
|
-
import React, { useEffect } from 'react';
|
|
90
|
-
import { useNile, Queries } from '@niledatabase/react';
|
|
91
|
-
import { useQuery } from '@tanstack/react-query';
|
|
91
|
+
Nile Auth components use CSS variables for theming. This means that you can override the colors and other styles by setting the CSS variables. We support the same CSS variables that [Shadcn uses](https://ui.shadcn.com/docs/theming#list-of-variables). You can modify them in your `global.css` file.
|
|
92
92
|
|
|
93
|
-
|
|
94
|
-
const nile = useNile();
|
|
95
|
-
const [users, setUsers] = useState();
|
|
96
|
-
const { data: users = [] } = useQuery(Queries.ListUsers, () => nile.users.listUsers());
|
|
97
|
-
// with multiple requests
|
|
98
|
-
// const [{ data: users = [] }, { data: invites = [] }] = useQueries([
|
|
99
|
-
// { queryKey: Queries.ListUsers, queryFn: () => nile.users.listUsers({}) },
|
|
100
|
-
// { queryKey: Queries.ListInvites, queryFn: () => nile.organizations.listInvites({}) },
|
|
101
|
-
// ]);
|
|
93
|
+
For "spot changes", you can use the `className` prop of a component to customize it individually:
|
|
102
94
|
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
return <div id={user.id}>{`Email: ${user.email}`</div>;
|
|
106
|
-
})
|
|
107
|
-
);
|
|
108
|
-
}
|
|
95
|
+
```tsx
|
|
96
|
+
<SignOutButton className="bg-red-500" />
|
|
109
97
|
```
|
|
110
98
|
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
For theming and display, A combination of [mui joy](https://mui.com/joy-ui/getting-started/overview/) and [material ui](https://mui.com/material-ui/getting-started/overview/) is used. As joy approaches feature parity with material, it will be removed from this codebase. For now, there are helper functions in the theme to support both, with the theming function preferring mui joy settings and colors over material.
|
|
114
|
-
|
|
115
|
-
For details on theming, see their [theming documentation](https://mui.com/joy-ui/customization/approaches/). You can pass a custom `theme` object to the `NileProvider` and it will merge it with the combined material and joy themes in the `<NileProvider />`.
|
|
116
|
-
|
|
117
|
-
```typescript
|
|
118
|
-
import { NileProvider } from '@niledatabase/react';
|
|
119
|
-
import { extendTheme } from '@mui/joy/styles';
|
|
120
|
-
const customTheme = extendTheme({
|
|
121
|
-
colorSchemes: {
|
|
122
|
-
light: {
|
|
123
|
-
palette: {
|
|
124
|
-
primary: {
|
|
125
|
-
solidBg: '#0078D4',
|
|
126
|
-
solidHoverBg: '#106EBE',
|
|
127
|
-
solidActiveBg: '#005A9E',
|
|
128
|
-
solidDisabledBg: '#F3F2F1',
|
|
129
|
-
solidDisabledColor: '#A19F9D',
|
|
130
|
-
},
|
|
131
|
-
},
|
|
132
|
-
},
|
|
133
|
-
},
|
|
134
|
-
});
|
|
99
|
+
## Learn more
|
|
135
100
|
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
<div>Welcome to my great app</div>
|
|
140
|
-
</NileProvider>
|
|
141
|
-
);
|
|
142
|
-
}
|
|
143
|
-
```
|
|
101
|
+
- You can learn more about Nile and the SDK in [https://thenile.dev/docs]
|
|
102
|
+
- You can find detailed code examples in [our main repo](https://github.com/niledatabase/niledatabase)
|
|
103
|
+
- Nile SDK interacts with APIs in Nile Auth service. You can learn more about it in the [repository](https://github.com/niledatabase/nile-auth) and the [docs](https://thenile.dev/docs/auth)
|
package/dist/index.d.mts
CHANGED
|
@@ -1,148 +1,40 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
1
|
+
import * as React$1 from 'react';
|
|
2
2
|
import React__default from 'react';
|
|
3
3
|
import * as _tanstack_react_query from '@tanstack/react-query';
|
|
4
4
|
import { QueryClient } from '@tanstack/react-query';
|
|
5
|
-
import
|
|
6
|
-
import { SignInOptions, LiteralUnion, ClientSafeProvider, SignOutParams, SignOutResponse, SignInAuthorizationParams, SignInResponse, UseSessionOptions } from 'next-auth/react';
|
|
5
|
+
import { IncomingMessage } from 'http';
|
|
7
6
|
import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
|
|
8
7
|
import { VariantProps } from 'class-variance-authority';
|
|
9
|
-
import { CreateBasicUserRequest } from '@niledatabase/browser';
|
|
10
|
-
import { CtxOrReq } from 'next-auth/client/_utils';
|
|
11
|
-
import { BuiltInProviderType, RedirectableProviderType } from 'next-auth/providers/index';
|
|
12
8
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
type AllowedAny$3 = any;
|
|
16
|
-
type Props$5 = {
|
|
17
|
-
redirect?: boolean;
|
|
18
|
-
onSuccess?: SignInSuccess;
|
|
19
|
-
onError?: (e: Error, info: EmailSignInInfo) => void;
|
|
20
|
-
beforeMutate?: (data: AllowedAny$3) => AllowedAny$3;
|
|
21
|
-
buttonText?: string;
|
|
22
|
-
client?: QueryClient;
|
|
23
|
-
callbackUrl?: string;
|
|
24
|
-
init?: RequestInit;
|
|
25
|
-
};
|
|
26
|
-
|
|
27
|
-
declare function EmailSigningIn(props: Props$5): React__default.JSX.Element;
|
|
28
|
-
|
|
29
|
-
declare const buttonVariants: (props?: ({
|
|
30
|
-
variant?: "default" | "link" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
|
|
31
|
-
size?: "default" | "sm" | "lg" | "icon" | null | undefined;
|
|
32
|
-
} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
|
|
33
|
-
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
|
|
34
|
-
asChild?: boolean;
|
|
35
|
-
loading?: boolean;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
type EmailError = void | {
|
|
39
|
-
error: string;
|
|
40
|
-
ok: boolean;
|
|
9
|
+
interface SignInResponse$1 {
|
|
10
|
+
error: string | null;
|
|
41
11
|
status: number;
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
12
|
+
ok: boolean;
|
|
13
|
+
url: string | null;
|
|
14
|
+
}
|
|
15
|
+
type LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>);
|
|
16
|
+
interface SignInOptions extends Record<string, unknown> {
|
|
17
|
+
/**
|
|
18
|
+
* Specify to which URL the user will be redirected after signing in. Defaults to the page URL the sign-in is initiated from.
|
|
19
|
+
*
|
|
20
|
+
* [Documentation](https://next-auth.js.org/getting-started/client#specifying-a-callbackurl)
|
|
21
|
+
*/
|
|
45
22
|
callbackUrl?: string;
|
|
23
|
+
/** [Documentation](https://next-auth.js.org/getting-started/client#using-the-redirect-false-option) */
|
|
46
24
|
redirect?: boolean;
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
*/
|
|
61
|
-
declare const EmailSignInButton: {
|
|
62
|
-
({ callbackUrl, className, variant, size, asChild, redirect, buttonText, email, onFailure, onSent, ...props }: AllProps): React__default.JSX.Element;
|
|
63
|
-
displayName: string;
|
|
64
|
-
};
|
|
65
|
-
|
|
66
|
-
declare function useEmailSignIn(params?: Props$5): _tanstack_react_query.UseMutateFunction<Response, Error, next_auth_react.SignInOptions, unknown>;
|
|
67
|
-
|
|
68
|
-
/**
|
|
69
|
-
* A component for a Google login button, according to their design language.
|
|
70
|
-
* This works when an identity provider is configured in the admin dashboard.
|
|
71
|
-
* @param props callbackUrl: a string to override the URL provided by the context
|
|
72
|
-
* @returns a JSX.Element to render
|
|
73
|
-
*/
|
|
74
|
-
declare const GoogleSSOButton: {
|
|
75
|
-
({ callbackUrl, className, variant, size, buttonText, asChild, init, ...props }: ButtonProps & {
|
|
76
|
-
callbackUrl?: string;
|
|
77
|
-
buttonText?: string;
|
|
78
|
-
init?: RequestInit;
|
|
79
|
-
}): React__default.JSX.Element;
|
|
80
|
-
displayName: string;
|
|
81
|
-
};
|
|
82
|
-
|
|
83
|
-
declare const AzureSignInButton: {
|
|
84
|
-
({ callbackUrl, className, buttonText, variant, size, init, asChild, ...props }: ButtonProps & {
|
|
85
|
-
callbackUrl?: string;
|
|
86
|
-
buttonText?: string;
|
|
87
|
-
init?: RequestInit;
|
|
88
|
-
}): React__default.JSX.Element;
|
|
89
|
-
displayName: string;
|
|
90
|
-
};
|
|
91
|
-
|
|
92
|
-
declare const DiscordSignInButton: {
|
|
93
|
-
({ callbackUrl, className, buttonText, variant, size, asChild, init, ...props }: ButtonProps & {
|
|
94
|
-
callbackUrl?: string;
|
|
95
|
-
buttonText?: string;
|
|
96
|
-
init?: RequestInit;
|
|
97
|
-
}): React__default.JSX.Element;
|
|
98
|
-
displayName: string;
|
|
99
|
-
};
|
|
100
|
-
|
|
101
|
-
declare const GitHubSignInButton: {
|
|
102
|
-
({ callbackUrl, className, buttonText, variant, size, init, asChild, ...props }: ButtonProps & {
|
|
103
|
-
callbackUrl?: string;
|
|
104
|
-
buttonText?: string;
|
|
105
|
-
init?: RequestInit;
|
|
106
|
-
}): React__default.JSX.Element;
|
|
107
|
-
displayName: string;
|
|
108
|
-
};
|
|
109
|
-
|
|
110
|
-
declare const HubSpotSignInButton: {
|
|
111
|
-
({ callbackUrl, className, buttonText, variant, size, init, asChild, ...props }: ButtonProps & {
|
|
112
|
-
callbackUrl?: string;
|
|
113
|
-
buttonText?: string;
|
|
114
|
-
init?: RequestInit;
|
|
115
|
-
}): React__default.JSX.Element;
|
|
116
|
-
displayName: string;
|
|
117
|
-
};
|
|
118
|
-
|
|
119
|
-
declare const LinkedInSignInButton: {
|
|
120
|
-
({ callbackUrl, className, buttonText, variant, size, asChild, init, ...props }: ButtonProps & {
|
|
121
|
-
callbackUrl?: string;
|
|
122
|
-
buttonText?: string;
|
|
123
|
-
init?: RequestInit;
|
|
124
|
-
}): React__default.JSX.Element;
|
|
125
|
-
displayName: string;
|
|
126
|
-
};
|
|
127
|
-
|
|
128
|
-
declare const SlackSignInButton: {
|
|
129
|
-
({ callbackUrl, className, buttonText, variant, size, init, asChild, ...props }: ButtonProps & {
|
|
130
|
-
callbackUrl?: string;
|
|
131
|
-
buttonText?: string;
|
|
132
|
-
init?: RequestInit;
|
|
133
|
-
}): React__default.JSX.Element;
|
|
134
|
-
displayName: string;
|
|
135
|
-
};
|
|
136
|
-
|
|
137
|
-
declare const XSignInButton: {
|
|
138
|
-
({ callbackUrl, className, buttonText, variant, size, init, asChild, ...props }: ButtonProps & {
|
|
139
|
-
callbackUrl?: string;
|
|
140
|
-
buttonText?: string;
|
|
141
|
-
init?: RequestInit;
|
|
142
|
-
}): React__default.JSX.Element;
|
|
143
|
-
displayName: string;
|
|
144
|
-
};
|
|
145
|
-
|
|
25
|
+
}
|
|
26
|
+
type SignInAuthorizationParams = string | string[][] | Record<string, string> | URLSearchParams;
|
|
27
|
+
type ProviderType = 'oauth' | 'email' | 'credentials';
|
|
28
|
+
interface ClientSafeProvider {
|
|
29
|
+
id: LiteralUnion<BuiltInProviderType>;
|
|
30
|
+
name: string;
|
|
31
|
+
type: ProviderType;
|
|
32
|
+
signinUrl: string;
|
|
33
|
+
callbackUrl: string;
|
|
34
|
+
}
|
|
35
|
+
type RedirectableProviderType = 'email' | 'credentials';
|
|
36
|
+
type OAuthProviderType = 'linkedin' | 'hubspot' | 'google' | 'azure-ad' | 'slack' | 'github' | 'twitter' | 'discord';
|
|
37
|
+
type BuiltInProviderType = RedirectableProviderType | OAuthProviderType;
|
|
146
38
|
type JWT = {
|
|
147
39
|
email: string;
|
|
148
40
|
sub: string;
|
|
@@ -202,6 +94,48 @@ type PartialAuthorizer = null | {
|
|
|
202
94
|
};
|
|
203
95
|
requestInit?: RequestInit | undefined;
|
|
204
96
|
};
|
|
97
|
+
interface CtxOrReq {
|
|
98
|
+
req?: Partial<IncomingMessage> & {
|
|
99
|
+
body?: any;
|
|
100
|
+
};
|
|
101
|
+
ctx?: {
|
|
102
|
+
req: Partial<IncomingMessage> & {
|
|
103
|
+
body?: any;
|
|
104
|
+
};
|
|
105
|
+
};
|
|
106
|
+
}
|
|
107
|
+
interface SignOutParams<R extends boolean = true> {
|
|
108
|
+
callbackUrl?: string;
|
|
109
|
+
redirect?: R;
|
|
110
|
+
}
|
|
111
|
+
interface SignOutResponse {
|
|
112
|
+
url: string;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
type EmailSignInInfo = SignInOptions;
|
|
116
|
+
type SignInSuccess = (response: Response) => void;
|
|
117
|
+
type AllowedAny$3 = any;
|
|
118
|
+
type Props$5 = {
|
|
119
|
+
redirect?: boolean;
|
|
120
|
+
onSuccess?: SignInSuccess;
|
|
121
|
+
onError?: (e: Error, info: EmailSignInInfo) => void;
|
|
122
|
+
beforeMutate?: (data: AllowedAny$3) => AllowedAny$3;
|
|
123
|
+
buttonText?: string;
|
|
124
|
+
client?: QueryClient;
|
|
125
|
+
callbackUrl?: string;
|
|
126
|
+
init?: RequestInit;
|
|
127
|
+
};
|
|
128
|
+
|
|
129
|
+
declare function EmailSigningIn(props: Props$5): React__default.JSX.Element;
|
|
130
|
+
|
|
131
|
+
declare const buttonVariants: (props?: ({
|
|
132
|
+
variant?: "default" | "link" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
|
|
133
|
+
size?: "default" | "sm" | "lg" | "icon" | null | undefined;
|
|
134
|
+
} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
|
|
135
|
+
interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
|
|
136
|
+
asChild?: boolean;
|
|
137
|
+
loading?: boolean;
|
|
138
|
+
}
|
|
205
139
|
|
|
206
140
|
type WarningCode = 'NEXTAUTH_URL' | 'NO_SECRET' | 'TWITTER_OAUTH_2_BETA' | 'DEBUG_ENABLED';
|
|
207
141
|
/**
|
|
@@ -277,7 +211,7 @@ declare class Authorizer {
|
|
|
277
211
|
init?: ResponseInit;
|
|
278
212
|
fetchUrl?: string;
|
|
279
213
|
auth?: Authorizer | PartialAuthorizer;
|
|
280
|
-
}, authorizationParams?: SignInAuthorizationParams): Promise<P extends RedirectableProviderType ? SignInResponse | undefined : undefined>;
|
|
214
|
+
}, authorizationParams?: SignInAuthorizationParams): Promise<P extends RedirectableProviderType ? SignInResponse$1 | undefined : undefined>;
|
|
281
215
|
signUp(options: {
|
|
282
216
|
baseUrl?: string;
|
|
283
217
|
init?: ResponseInit;
|
|
@@ -300,6 +234,102 @@ declare const getProviders: () => Promise<Record<LiteralUnion<BuiltInProviderTyp
|
|
|
300
234
|
declare const signOut: typeof authorizer.signOut;
|
|
301
235
|
declare const signIn: typeof authorizer.signIn;
|
|
302
236
|
|
|
237
|
+
interface SignInResponse {
|
|
238
|
+
error: string | null;
|
|
239
|
+
status: number;
|
|
240
|
+
ok: boolean;
|
|
241
|
+
url: string | null;
|
|
242
|
+
}
|
|
243
|
+
type SSOButtonProps = {
|
|
244
|
+
callbackUrl?: string;
|
|
245
|
+
buttonText?: string;
|
|
246
|
+
init?: RequestInit;
|
|
247
|
+
baseUrl?: string;
|
|
248
|
+
fetchUrl?: string;
|
|
249
|
+
auth?: Authorizer | PartialAuthorizer;
|
|
250
|
+
onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, res: SignInResponse | undefined) => void;
|
|
251
|
+
};
|
|
252
|
+
|
|
253
|
+
type EmailError = void | {
|
|
254
|
+
error: string;
|
|
255
|
+
ok: boolean;
|
|
256
|
+
status: number;
|
|
257
|
+
url: null | string;
|
|
258
|
+
};
|
|
259
|
+
type AllProps = ButtonProps & SSOButtonProps & {
|
|
260
|
+
callbackUrl?: string;
|
|
261
|
+
redirect?: boolean;
|
|
262
|
+
email: string;
|
|
263
|
+
onSent?: () => void;
|
|
264
|
+
onFailure?: (error: EmailError) => void;
|
|
265
|
+
buttonText?: string;
|
|
266
|
+
};
|
|
267
|
+
/**
|
|
268
|
+
* This works when the email identity provider is configured in the admin dashboard.
|
|
269
|
+
* @param props callbackUrl: the url to send the user to from their email
|
|
270
|
+
* @param props redirect: redirect to the default (unbranded) 'check your email' page. default is false
|
|
271
|
+
* @param props email: the email to send to
|
|
272
|
+
* @param props onSent: called if the email was sent
|
|
273
|
+
* @param props onFailure: called if there was a reportable
|
|
274
|
+
* @returns a JSX.Element to render
|
|
275
|
+
*/
|
|
276
|
+
declare const EmailSignInButton: {
|
|
277
|
+
({ callbackUrl, className, variant, size, asChild, redirect, buttonText, email, onFailure, onSent, fetchUrl, baseUrl, auth, ...props }: AllProps): React__default.JSX.Element;
|
|
278
|
+
displayName: string;
|
|
279
|
+
};
|
|
280
|
+
|
|
281
|
+
declare function useEmailSignIn(params?: Props$5): _tanstack_react_query.UseMutateFunction<Response, Error, SignInOptions, unknown>;
|
|
282
|
+
|
|
283
|
+
/**
|
|
284
|
+
* A component for a Google login button, according to their design language.
|
|
285
|
+
* This works when an identity provider is configured in the admin dashboard.
|
|
286
|
+
* @param props callbackUrl: a string to override the URL provided by the context
|
|
287
|
+
* @returns a JSX.Element to render
|
|
288
|
+
*/
|
|
289
|
+
declare const GoogleSSOButton: {
|
|
290
|
+
({ callbackUrl, className, variant, size, buttonText, asChild, init, auth, fetchUrl, baseUrl, ...props }: ButtonProps & SSOButtonProps): React__default.JSX.Element;
|
|
291
|
+
displayName: string;
|
|
292
|
+
};
|
|
293
|
+
|
|
294
|
+
declare const AzureSignInButton: {
|
|
295
|
+
({ callbackUrl, className, buttonText, variant, size, init, asChild, auth, fetchUrl, baseUrl, ...props }: ButtonProps & SSOButtonProps): React__default.JSX.Element;
|
|
296
|
+
displayName: string;
|
|
297
|
+
};
|
|
298
|
+
|
|
299
|
+
declare const DiscordSignInButton: {
|
|
300
|
+
({ callbackUrl, className, buttonText, variant, size, asChild, init, auth, fetchUrl, baseUrl, ...props }: ButtonProps & SSOButtonProps): React__default.JSX.Element;
|
|
301
|
+
displayName: string;
|
|
302
|
+
};
|
|
303
|
+
|
|
304
|
+
declare const GitHubSignInButton: {
|
|
305
|
+
({ callbackUrl, className, buttonText, variant, size, init, asChild, auth, fetchUrl, baseUrl, ...props }: ButtonProps & SSOButtonProps): React__default.JSX.Element;
|
|
306
|
+
displayName: string;
|
|
307
|
+
};
|
|
308
|
+
|
|
309
|
+
declare const HubSpotSignInButton: {
|
|
310
|
+
({ callbackUrl, className, buttonText, variant, size, init, asChild, auth, fetchUrl, baseUrl, ...props }: ButtonProps & SSOButtonProps): React__default.JSX.Element;
|
|
311
|
+
displayName: string;
|
|
312
|
+
};
|
|
313
|
+
|
|
314
|
+
declare const LinkedInSignInButton: {
|
|
315
|
+
({ callbackUrl, className, buttonText, variant, size, asChild, init, auth, fetchUrl, baseUrl, ...props }: ButtonProps & SSOButtonProps): React__default.JSX.Element;
|
|
316
|
+
displayName: string;
|
|
317
|
+
};
|
|
318
|
+
|
|
319
|
+
declare const SlackSignInButton: {
|
|
320
|
+
({ callbackUrl, className, buttonText, variant, size, init, asChild, ...props }: ButtonProps & {
|
|
321
|
+
callbackUrl?: string;
|
|
322
|
+
buttonText?: string;
|
|
323
|
+
init?: RequestInit;
|
|
324
|
+
}): React__default.JSX.Element;
|
|
325
|
+
displayName: string;
|
|
326
|
+
};
|
|
327
|
+
|
|
328
|
+
declare const XSignInButton: {
|
|
329
|
+
({ callbackUrl, className, buttonText, variant, size, init, asChild, auth, fetchUrl, baseUrl, ...props }: ButtonProps & SSOButtonProps): React__default.JSX.Element;
|
|
330
|
+
displayName: string;
|
|
331
|
+
};
|
|
332
|
+
|
|
303
333
|
type ComponentFetchProps = {
|
|
304
334
|
auth?: Authorizer | PartialAuthorizer;
|
|
305
335
|
init?: RequestInit;
|
|
@@ -312,6 +342,12 @@ type PrefetchParams = {
|
|
|
312
342
|
fetchUrl?: string;
|
|
313
343
|
};
|
|
314
344
|
|
|
345
|
+
interface CreateBasicUserRequest {
|
|
346
|
+
email: string;
|
|
347
|
+
password: string;
|
|
348
|
+
preferredName?: string;
|
|
349
|
+
newTenant?: string;
|
|
350
|
+
}
|
|
315
351
|
type SignUpInfo = CreateBasicUserRequest & {
|
|
316
352
|
tenantId?: string;
|
|
317
353
|
fetchUrl?: string;
|
|
@@ -353,7 +389,7 @@ type Props$3 = ComponentFetchProps & {
|
|
|
353
389
|
|
|
354
390
|
declare function SigningIn({ className, ...props }: Props$3): React__default.JSX.Element;
|
|
355
391
|
|
|
356
|
-
declare function useSignIn(params?: Props$3): _tanstack_react_query.UseMutateFunction<
|
|
392
|
+
declare function useSignIn(params?: Props$3): _tanstack_react_query.UseMutateFunction<SignInResponse$1 | undefined, Error, LoginInfo, any>;
|
|
357
393
|
|
|
358
394
|
type Props$2 = ButtonProps & ComponentFetchProps & {
|
|
359
395
|
redirect?: boolean;
|
|
@@ -417,6 +453,11 @@ declare const SessionContext: React__default.Context<{
|
|
|
417
453
|
data: null | undefined;
|
|
418
454
|
status: "unauthenticated" | "loading";
|
|
419
455
|
} | undefined>;
|
|
456
|
+
interface UseSessionOptions<R extends boolean> {
|
|
457
|
+
required: R;
|
|
458
|
+
/** Defaults to `signIn` */
|
|
459
|
+
onUnauthenticated?: () => void;
|
|
460
|
+
}
|
|
420
461
|
/**
|
|
421
462
|
* React Hook that gives you access
|
|
422
463
|
* to the logged in user's session data.
|
|
@@ -527,7 +568,7 @@ declare function ResetPasswordForm(params: Params): React__default.JSX.Element;
|
|
|
527
568
|
|
|
528
569
|
declare function useResetPassword(params?: Params): _tanstack_react_query.UseMutateFunction<Response, Error, MutateFnParams, unknown>;
|
|
529
570
|
|
|
530
|
-
declare const Email: () => React.JSX.Element;
|
|
531
|
-
declare const Password: () => React.JSX.Element;
|
|
571
|
+
declare const Email: () => React$1.JSX.Element;
|
|
572
|
+
declare const Password: () => React$1.JSX.Element;
|
|
532
573
|
|
|
533
574
|
export { type ActiveSession, type AuthConfig, type AuthState, Authorizer, AzureSignInButton as Azure, DiscordSignInButton as Discord, Email, EmailSigningIn as EmailSignIn, EmailSignInButton, GitHubSignInButton as GitHub, GoogleSSOButton as Google, HubSpotSignInButton as HubSpot, type JWT, LinkedInSignInButton as LinkedIn, type Listener, type ListenerKeys, type ListenerParams, Password, ResetPasswordForm as PasswordResetForm, ResetPasswordForm$1 as PasswordResetRequestForm, type NonErrorSession as Session, SessionContext, SessionProvider, SigningIn as SignInForm, SignOutButton, SigningUp as SignUpForm, SignedIn, SignedOut, SlackSignInButton as Slack, TenantSelector, UserInfo, XSignInButton as X, auth, getCsrfToken, getProviders, getSession, signIn, signOut, useEmailSignIn, useMe, useResetPassword, useSession, useSignIn, useSignUp, useTenantId, useTenants };
|