changed initial project creation params, added suspense to doc

This commit is contained in:
Zai Shi 2024-03-07 16:54:18 +08:00
parent a1c0dc76a6
commit 89b688fd89
3 changed files with 13 additions and 9 deletions

View File

@ -60,7 +60,7 @@ npm install @stackframe/stack
4. In your `app/layout.tsx`, wrap your entire layout with a `StackProvider`. Afterwards, it should look like this:
```tsx
import React from "react";
import React, { Suspense } from "react";
import { StackProvider } from "@stackframe/stack";
import { stackApp } from "@/lib/stack";
@ -68,9 +68,11 @@ npm install @stackframe/stack
return (
<html lang="en">
<body>
<StackProvider app={stackApp}>
{children}
</StackProvider>
<Suspense>
<StackProvider app={stackApp}>
{children}
</StackProvider>
</Suspense>
</body>
</html>
);
@ -79,6 +81,8 @@ npm install @stackframe/stack
This lets you use the `useStackApp()` and `useUser()` hooks.
Note that Stack uses the new react suspense feature, which abstracted away all the hurdle of handling loading states. Check our [here](https://react.dev/reference/react/Suspense) if you want to learn more about suspense.
5. That's it! Stack is now configured in your Next.js project. If you start your Next.js app with `npm run dev` and navigate to `http://localhost:3000/handler/signup`, you will see the Stack sign-up page!
![Stack sign up page](../imgs/signup-page.png)

View File

@ -60,7 +60,7 @@ export const POST = smartRouteHandler(async (req: NextRequest) => {
throw new StatusError(StatusError.Forbidden, "Invalid project user");
}
const project = await createProject(projectUser, { displayName, description, allowLocalhost: true, credentialEnabled: false });
const project = await createProject(projectUser, { displayName, description });
return NextResponse.json(project);
});

View File

@ -138,7 +138,7 @@ export async function listProjects(projectUser: ServerUserJson): Promise<Project
export async function createProject(
projectUser: ServerUserJson,
projectOptions: Pick<ProjectJson, "displayName" | "description"> & Pick<ProjectJson['evaluatedConfig'], 'allowLocalhost' | 'credentialEnabled'>
projectOptions: Pick<ProjectJson, "displayName" | "description">
): Promise<ProjectJson> {
if (projectUser.projectId !== "internal") {
throw new Error("Only internal project users can create projects");
@ -153,10 +153,10 @@ export async function createProject(
description: projectOptions.description,
config: {
create: {
allowLocalhost: projectOptions.allowLocalhost,
credentialEnabled: projectOptions.credentialEnabled,
allowLocalhost: true,
credentialEnabled: true,
oauthProviderConfigs: {
create: (['github', 'facebook', 'google', 'microsoft'] as const).map((id) => ({
create: (['github', 'google'] as const).map((id) => ({
id,
proxiedOAuthConfig: {
create: {