mirror of
https://github.com/stack-auth/stack.git
synced 2026-06-04 21:04:37 +08:00
Consistent file system between manual installation & wizard (#50)
Co-authored-by: mainak <heellomeelo@gmail.com>
This commit is contained in:
parent
01fbe88664
commit
7a7db9664e
@ -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>
|
||||
|
||||
@ -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);
|
||||
```
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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: {
|
||||
|
||||
@ -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.
|
||||
|
||||
|
||||
@ -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",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user