Consistent file system between manual installation & wizard (#50)

Co-authored-by: mainak <heellomeelo@gmail.com>
This commit is contained in:
Mainak Mukherjee 2024-05-28 14:10:47 +05:30 committed by GitHub
parent 01fbe88664
commit 7a7db9664e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 39 additions and 38 deletions

View File

@ -53,14 +53,15 @@ npm install @stackframe/stack
STACK_SECRET_SERVER_KEY=<your-secret-server-key>
```
2. Create a new file in `lib/stack.ts` and fill it with the following:
2. Create a new file `stack.ts` in your root directory and fill it with the following:
```tsx
import "server-only";
import { StackServerApp } from "@stackframe/stack";
export const stackApp = new StackServerApp({
export const stackServerApp = new StackServerApp({
tokenStore: "nextjs-cookie", // storing auth tokens in cookies
//there is other parameter named "urls" which is covered later in the docs
});
```
@ -72,10 +73,10 @@ npm install @stackframe/stack
```tsx
import { StackHandler } from "@stackframe/stack";
import { stackApp } from "@/lib/stack";
import { stackServerApp } from "@/stack";
export default function Handler(props: any) {
return <StackHandler app={stackApp} {...props} />;
return <StackHandler app={stackServerApp} {...props} />;
}
```
@ -87,13 +88,13 @@ npm install @stackframe/stack
```tsx
import React from "react";
import { StackProvider, StackTheme } from "@stackframe/stack";
import { stackApp } from "@/lib/stack";
import { stackServerApp } from "@/stack";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<StackProvider app={stackApp}>
<StackProvider app={stackServerApp}>
<StackTheme>
{children}
</StackTheme>

View File

@ -33,10 +33,10 @@ On Server Components, you don't need `useStackApp()`. Instead, you can just impo
```tsx
import "server-only";
import { stackApp } from "@/lib/stack";
import { stackServerApp } from "@/stack";
export default async function MyComponent() {
const user = await stackApp.getUser();
const user = await stackServerApp.getUser();
return <div>{user ? `Hello, ${user.displayName ?? "anon"}` : 'You are not logged in'}</div>;
}
@ -68,10 +68,10 @@ Call `useUser` (or `getUser`) with the `{ or: 'redirect' }` option to protect th
<TabItem value="server" label="Server Component">
```tsx
import { stackApp } from "@/lib/stack";
import { stackServerApp } from "@/stack";
export default async function Protected() {
await stackApp.getUser({ or: 'redirect' });
await stackServerApp.getUser({ or: 'redirect' });
return <h1>You can only see this if you are logged in</h1>
}
```
@ -101,10 +101,10 @@ You can sign out the user by redirecting them to `/handler/signout` or simply by
<TabItem value="server" label="Redirect">
```tsx
import { stackApp } from "@/lib/stack";
import { stackServerApp } from "@/stack";
export default async function SignOutLink() {
return <a href={stackApp.urls.signOut}>
return <a href={stackServerApp.urls.signOut}>
Sign Out
</a>;
}
@ -150,11 +150,11 @@ Stack automatically creates a user profile on sign-up. Let's create a page that
<TabItem value="server" label="Server Component">
```tsx
import { stackApp } from "@/lib/stack";
import { stackServerApp } from "@/stack";
import { UserButton } from "@stackframe/stack";
export default async function Page() {
const user = await stackApp.getUser();
const user = await stackServerApp.getUser();
return (
<div>
{user ? (
@ -162,13 +162,13 @@ Stack automatically creates a user profile on sign-up. Let's create a page that
<UserButton />
<p>Welcome, {user.displayName}</p>
<p>Your e-mail: {user.primaryEmail}</p>
<p><a href={stackApp.urls.signOut}>Sign Out</a></p>
<p><a href={stackServerApp.urls.signOut}>Sign Out</a></p>
</div>
) : (
<div>
<p>You are not logged in</p>
<p><a href={stackApp.urls.signIn}>Sign in</a></p>
<p><a href={stackApp.urls.signUp}>Sign up</a></p>
<p><a href={stackServerApp.urls.signIn}>Sign in</a></p>
<p><a href={stackServerApp.urls.signUp}>Sign up</a></p>
</div>
)}
</div>
@ -223,8 +223,8 @@ If you want to store sensitive information that is only visible on the server si
```tsx
// server side only
import { stackApp } from "@/lib/stack";
const user = await stackApp.getUser();
import { stackServerApp } from "@/stack";
const user = await stackServerApp.getUser();
await user.update({
serverMetadata: {
secretInfo: "This is a secret",
@ -236,8 +236,8 @@ You can also access them from the `User` object:
```tsx
// server side only
import { stackApp } from "@/lib/stack";
const user = await stackApp.getUser();
import { stackServerApp } from "@/stack";
const user = await stackServerApp.getUser();
console.log(user.serverMetadata);
```

View File

@ -56,10 +56,10 @@ You can list all the teams a user belongs to by using the `listTeams` method or
<TabItem value="server" label="Server Component">
```tsx
import { stackApp } from "@/lib/stack";
import { stackServerApp } from "@/stack";
export default async function DisplayUserTeams() {
const user = await stackApp.getUser({ or: 'redirect' });
const user = await stackServerApp.getUser({ or: 'redirect' });
const teams = await user.listTeams();
return <div>
@ -94,10 +94,10 @@ To obtain details of a specific team that a user belongs to, use the `getTeam` m
<TabItem value="server" label="Server Component">
```tsx
import { stackApp } from "@/lib/stack";
import { stackServerApp } from "@/stack";
export default async function DisplayUserTeam(props: { teamId: string }) {
const user = await stackApp.getUser({ or: 'redirect' });
const user = await stackServerApp.getUser({ or: 'redirect' });
const team = await user.getTeam(props.teamId);
return <div>
@ -182,10 +182,10 @@ You can check if a user has a specific permission by using the `getPermission` m
<TabItem value="server" label="Server Component">
```tsx
import { stackApp } from "@/lib/stack";
import { stackServerApp } from "@/stack";
export default async function CheckUserPermission() {
const user = await stackApp.getUser({ or: 'redirect' });
const user = await stackServerApp.getUser({ or: 'redirect' });
const permission = await user.getPermission('read');
// This is a server side check, so it's secure
@ -221,10 +221,10 @@ To get all permissions a user has, use the `listPermissions` method or `usePermi
<TabItem value="server" label="Server Component">
```tsx
import { stackApp } from "@/lib/stack";
import { stackServerApp } from "@/stack";
export default async function DisplayUserPermissions() {
const user = await stackApp.getUser({ or: 'redirect' });
const user = await stackServerApp.getUser({ or: 'redirect' });
const permissions = await user.listPermissions();
return <div>

View File

@ -21,10 +21,10 @@ export default function CustomSignInPage() {
}
```
Then you can instruct the Stack app in `lib/stack.ts` to use your custom sign in page:
Then you can instruct the Stack app in `stack.ts` to use your custom sign in page:
```tsx
export const stackApp = new StackServerApp({
export const stackServerApp = new StackServerApp({
// ...
// add these three lines
urls: {
@ -61,10 +61,10 @@ export default function CustomOAuthSignIn() {
}
```
Again, edit the Stack app in `lib/stack.ts` to use your custom sign in page:
Again, edit the Stack app in `stack.ts` to use your custom sign in page:
```tsx
export const stackApp = new StackServerApp({
export const stackServerApp = new StackServerApp({
// ...
// add these three lines
urls: {

View File

@ -10,7 +10,7 @@ sidebar_position: 1
## `CurrentUser` Object
You can call `useUser()` or `stackApp.getUser()` to get the `CurrentUser` object.
You can call `useUser()` or `stackServerApp.getUser()` to get the `CurrentUser` object.
### Attributes
@ -82,7 +82,7 @@ if (error) {
## `CurrentServerUser` Object
You can call `stackApp.getServerUser()` to get the `CurrentServerUser` object. `CurrentServerUser` has all the attributes and methods of `CurrentUser` and some additional ones shown below.
You can call `stackServerApp.getServerUser()` to get the `CurrentServerUser` object. `CurrentServerUser` has all the attributes and methods of `CurrentUser` and some additional ones shown below.
Note the `CurrentServerUser` should only be used on the server side because it contains server only metadata.

View File

@ -12,13 +12,13 @@ sidebar_position: 1
## Initialization
We showed in the [setup guide](../01-getting-started/02-setup.md) that you can create a `StackServerApp` in a file like `lib/stack.ts` like this:
We showed in the [setup guide](../01-getting-started/02-setup.md) that you can create a `StackServerApp` in a file like `stack.ts` like this:
```tsx
import "server-only";
import { StackServerApp } from "@stackframe/stack";
export const stackApp = new StackServerApp({
export const stackServerApp = new StackServerApp({
tokenStore: "nextjs-cookie", // storing auth tokens in cookies
});
```
@ -32,7 +32,7 @@ An object that contains some pre-defined URLs that Stack uses to route and redir
Example:
```tsx
export const stackApp = new StackServerApp({
export const stackServerApp = new StackServerApp({
tokenStore: "nextjs-cookie",
urls: {
signIn: "/custom-sign-in",