Skip to content

Commit

Permalink
Merge branch 'main' into filip-restructuring-tutorial
Browse files Browse the repository at this point in the history
  • Loading branch information
@sodic
sodic committed Feb 23, 2024
2 parents b269a7e + 49fe129 commit a5f8c5d
Show file tree
Hide file tree
Showing 2 changed files with 91 additions and 102 deletions.
152 changes: 74 additions & 78 deletions web/docs/auth/overview.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ If you set it to `true`, only authenticated users can access the page. Unauthent

```wasp title="main.wasp"
page MainPage {
component: import Main from "@client/pages/Main.jsx",
component: import Main from "@src/pages/Main",
authRequired: true
}
```
Expand All @@ -106,7 +106,7 @@ page MainPage {

```wasp title="main.wasp"
page MainPage {
component: import Main from "@client/pages/Main.tsx",
component: import Main from "@src/pages/Main",
authRequired: true
}
```
Expand All @@ -127,8 +127,8 @@ We provide an action for logging out the user. Here's how you can use it:
<Tabs groupId="js-ts">
<TabItem value="js" label="JavaScript">

```jsx title="client/components/LogoutButton.jsx"
import logout from '@wasp/auth/logout'
```jsx title="src/components/LogoutButton.jsx"
import { logout } from 'wasp/client/auth'

const LogoutButton = () => {
return <button onClick={logout}>Logout</button>
Expand All @@ -138,8 +138,8 @@ const LogoutButton = () => {
</TabItem>
<TabItem value="ts" label="TypeScript">

```tsx title="client/components/LogoutButton.tsx"
import logout from '@wasp/auth/logout'
```tsx title="src/components/LogoutButton.tsx"
import { logout } from 'wasp/client/auth'

const LogoutButton = () => {
return <button onClick={logout}>Logout</button>
Expand Down Expand Up @@ -197,14 +197,14 @@ If the page's declaration sets `authRequired` to `true`, the page's React compon
// ...
page AccountPage {
component: import Account from "@client/pages/Account.jsx",
component: import Account from "@src/pages/Account",
authRequired: true
}
```

```jsx title="client/pages/Account.jsx"
```jsx title="src/pages/Account.jsx"
import Button from './Button'
import logout from '@wasp/auth/logout'
import { logout } from 'wasp/client/auth'

const AccountPage = ({ user }) => {
return (
Expand All @@ -225,17 +225,17 @@ export default AccountPage
// ...
page AccountPage {
component: import Account from "@client/pages/Account.tsx",
component: import Account from "@src/pages/Account",
authRequired: true
}
```

```tsx title="client/pages/Account.tsx"
import { User as AuthenticatedUser } from '@wasp/auth/types'
```tsx title="src/pages/Account.tsx"
import { type AuthUser } from 'wasp/auth'
import Button from './Button'
import logout from '@wasp/auth/logout'
import { logout } from 'wasp/client/auth'

const AccountPage = ({ user }: { user: AuthenticatedUser }) => {
const AccountPage = ({ user }: { user: AuthUser }) => {
return (
<div>
<Button onClick={logout}>Logout</Button>
Expand All @@ -259,10 +259,9 @@ This hook is a thin wrapper over Wasp's `useQuery` hook and returns data in the
<Tabs groupId="js-ts">
<TabItem value="js" label="JavaScript">

```jsx title="src/client/pages/MainPage.jsx"
import useAuth from '@wasp/auth/useAuth'
```jsx title="src/pages/MainPage.jsx"
import { useAuth, logout } from 'wasp/client/auth'
import { Link } from 'react-router-dom'
import logout from '@wasp/auth/logout'
import Todo from '../Todo'

export function Main() {
Expand All @@ -289,10 +288,9 @@ export function Main() {
</TabItem>
<TabItem value="ts" label="TypeScript">

```tsx title="src/client/pages/MainPage.tsx"
import useAuth from '@wasp/auth/useAuth'
```tsx title="src/pages/MainPage.tsx"
import { useAuth, logout } from 'wasp/client/auth'
import { Link } from 'react-router-dom'
import logout from '@wasp/auth/logout'
import Todo from '../Todo'

export function Main() {
Expand Down Expand Up @@ -331,8 +329,8 @@ When authentication is enabled, all [queries and actions](../data-model/operatio
<Tabs groupId="js-ts">
<TabItem value="js" label="JavaScript">

```js title="src/server/actions.js"
import HttpError from '@wasp/core/HttpError.js'
```js title="src/actions.js"
import { HttpError } from 'wasp/server'

export const createTask = async (task, context) => {
if (!context.user) {
Expand All @@ -354,10 +352,10 @@ export const createTask = async (task, context) => {
</TabItem>
<TabItem value="ts" label="TypeScript">

```ts title="src/server/actions.ts"
import type { Task } from '@wasp/entities'
import type { CreateTask } from '@wasp/actions/types'
import HttpError from '@wasp/core/HttpError.js'
```ts title="src/actions.ts"
import { type Task } from 'wasp/entities'
import { type CreateTask } from 'wasp/server/operations'
import { HttpError } from 'wasp/server'

type CreateTaskPayload = Pick<Task, 'description'>

Expand Down Expand Up @@ -404,20 +402,20 @@ If you are saving a user's password in the database, you should **never** save i
// ...
action updatePassword {
fn: import { updatePassword } from "@server/auth.js",
fn: import { updatePassword } from "@src/auth",
}
```

<Tabs groupId="js-ts">
<TabItem value="js" label="JavaScript">

```js title="src/server/actions.js"
```js title="src/auth.js"
import {
createProviderId,
findAuthIdentity,
updateAuthIdentityProviderData,
deserializeAndSanitizeProviderData,
} from '@wasp/auth/utils.js';
createProviderId,
findAuthIdentity,
updateAuthIdentityProviderData,
deserializeAndSanitizeProviderData,
} from 'wasp/server/auth';
export const updatePassword = async (args, context) => {
const providerId = createProviderId('email', args.email)
Expand All @@ -438,14 +436,14 @@ export const updatePassword = async (args, context) => {
</TabItem>
<TabItem value="ts" label="TypeScript">

```ts title="src/server/actions.ts"
```ts title="src/auth.ts"
import {
createProviderId,
findAuthIdentity,
updateAuthIdentityProviderData,
deserializeAndSanitizeProviderData,
} from '@wasp/auth/utils.js';
import type { UpdatePassword } from '@wasp/actions/types'
createProviderId,
findAuthIdentity,
updateAuthIdentityProviderData,
deserializeAndSanitizeProviderData,
} from 'wasp/server/auth';
import { type UpdatePassword } from 'wasp/server/operations'
export const updatePassword: UpdatePassword<
{ email: string; password: string },
Expand Down Expand Up @@ -534,7 +532,7 @@ app crudTesting {
userEntity: User,
methods: {
usernameAndPassword: {
userSignupFields: import { userSignupFields } from "@server/auth/signup.js",
userSignupFields: import { userSignupFields } from "@src/auth/signup",
},
},
onAuthFailedRedirectTo: "/login",
Expand All @@ -547,10 +545,10 @@ entity User {=psl
psl=}
```
Then we'll define the `userSignupFields` object in the `server/auth/signup.js` file:
Then we'll define the `userSignupFields` object in the `src/auth/signup.js` file:
```ts title="server/auth/signup.js"
import { defineUserSignupFields } from '@wasp/auth/index.js'
```ts title="src/auth/signup.js"
import { defineUserSignupFields } from 'wasp/server/auth'

export const userSignupFields = defineUserSignupFields({
address: async (data) => {
Expand All @@ -576,7 +574,7 @@ app crudTesting {
userEntity: User,
methods: {
usernameAndPassword: {
userSignupFields: import { userSignupFields } from "@server/auth/signup.js",
userSignupFields: import { userSignupFields } from "@src/auth/signup",
},
},
onAuthFailedRedirectTo: "/login",
Expand All @@ -589,10 +587,10 @@ entity User {=psl
psl=}
```
Then we'll define the `userSignupFields` object in the `server/auth/signup.js` file:
Then we'll define the `userSignupFields` object in the `src/auth/signup.js` file:
```ts title="server/auth/signup.ts"
import { defineUserSignupFields } from '@wasp/auth/index.js'
```ts title="src/auth/signup.ts"
import { defineUserSignupFields } from 'wasp/server/auth'

export const userSignupFields = defineUserSignupFields({
address: async (data) => {
Expand Down Expand Up @@ -630,8 +628,8 @@ You can use any validation library you want to validate the fields. For example,
<Tabs groupId="js-ts">
<TabItem value="js" label="JavaScript">
```js title="server/auth/signup.js"
import { defineUserSignupFields } from '@wasp/auth/index.js'
```js title="src/auth/signup.js"
import { defineUserSignupFields } from 'wasp/server/auth'
import * as z from 'zod'

export const userSignupFields = defineUserSignupFields({
Expand All @@ -654,8 +652,8 @@ export const userSignupFields = defineUserSignupFields({
</TabItem>
<TabItem value="ts" label="TypeScript">
```ts title="server/auth/signup.ts"
import { defineUserSignupFields } from '@wasp/auth/index.js'
```ts title="src/auth/signup.ts"
import { defineUserSignupFields } from 'wasp/server/auth'
import * as z from 'zod'

export const userSignupFields = defineUserSignupFields({
Expand Down Expand Up @@ -714,14 +712,14 @@ Inside the list, there can be either **objects** or **render functions** (you ca
<Tabs groupId="js-ts">
<TabItem value="js" label="JavaScript">
```jsx title="client/SignupPage.jsx"
import { SignupForm } from '@wasp/auth/forms/Signup'
```jsx title="src/SignupPage.jsx"
import {
SignupForm,
FormError,
FormInput,
FormItemGroup,
FormLabel,
} from '@wasp/auth/forms/internal/Form'
} from 'wasp/client/auth'

export const SignupPage = () => {
return (
Expand Down Expand Up @@ -764,14 +762,14 @@ export const SignupPage = () => {
</TabItem>
<TabItem value="ts" label="TypeScript">
```tsx title="client/SignupPage.tsx"
import { SignupForm } from '@wasp/auth/forms/Signup'
```tsx title="src/SignupPage.tsx"
import {
SignupForm,
FormError,
FormInput,
FormItemGroup,
FormLabel,
} from '@wasp/auth/forms/internal/Form'
} from 'wasp/client/auth'

export const SignupPage = () => {
return (
Expand Down Expand Up @@ -826,9 +824,8 @@ Instead of passing in a list of extra fields, you can pass in a render function
<Tabs groupId="js-ts">
<TabItem value="js" label="JavaScript">
```jsx title="client/SignupPage.jsx"
import { SignupForm } from '@wasp/auth/forms/Signup'
import { FormItemGroup } from '@wasp/auth/forms/internal/Form'
```jsx title="src/SignupPage.jsx"
import { SignupForm, FormItemGroup } from 'wasp/client/auth'

export const SignupPage = () => {
return (
Expand All @@ -851,9 +848,8 @@ export const SignupPage = () => {
</TabItem>
<TabItem value="ts" label="TypeScript">
```tsx title="client/SignupPage.tsx"
import { SignupForm } from '@wasp/auth/forms/Signup'
import { FormItemGroup } from '@wasp/auth/forms/internal/Form'
```tsx title="src/SignupPage.tsx"
import { SignupForm, FormItemGroup } from 'wasp/client/auth'

export const SignupPage = () => {
return (
Expand Down Expand Up @@ -980,18 +976,18 @@ app crudTesting {
methods: {
usernameAndPassword: {
// highlight-next-line
userSignupFields: import { userSignupFields } from "@server/auth/signup.js",
userSignupFields: import { userSignupFields } from "@src/auth/signup",
},
},
onAuthFailedRedirectTo: "/login",
},
}
```
Then we'll export the `userSignupFields` object from the `server/auth/signup.js` file:
Then we'll export the `userSignupFields` object from the `src/auth/signup.js` file:
```ts title="server/auth/signup.js"
import { defineUserSignupFields } from '@wasp/auth/index.js'
```ts title="src/auth/signup.js"
import { defineUserSignupFields } from 'wasp/server/auth'

export const userSignupFields = defineUserSignupFields({
address: async (data) => {
Expand All @@ -1018,18 +1014,18 @@ app crudTesting {
methods: {
usernameAndPassword: {
// highlight-next-line
userSignupFields: import { userSignupFields } from "@server/auth/signup.js",
userSignupFields: import { userSignupFields } from "@src/auth/signup",
},
},
onAuthFailedRedirectTo: "/login",
},
}
```
Then we'll export the `userSignupFields` object from the `server/auth/signup.ts` file:
Then we'll export the `userSignupFields` object from the `src/auth/signup.ts` file:
```ts title="server/auth/signup.ts"
import { defineUserSignupFields } from '@wasp/auth/index.js'
```ts title="src/auth/signup.ts"
import { defineUserSignupFields } from 'wasp/server/auth'

export const userSignupFields = defineUserSignupFields({
address: async (data) => {
Expand Down Expand Up @@ -1064,14 +1060,14 @@ To customize the `SignupForm` component, you need to pass in the `additionalFiel
<Tabs groupId="js-ts">
<TabItem value="js" label="JavaScript">
```jsx title="client/SignupPage.jsx"
import { SignupForm } from '@wasp/auth/forms/Signup'
```jsx title="src/SignupPage.jsx"
import {
SignupForm,
FormError,
FormInput,
FormItemGroup,
FormLabel,
} from '@wasp/auth/forms/internal/Form'
} from 'wasp/client/auth'

export const SignupPage = () => {
return (
Expand Down Expand Up @@ -1112,14 +1108,14 @@ export const SignupPage = () => {
</TabItem>
<TabItem value="ts" label="TypeScript">
```tsx title="client/SignupPage.tsx"
import { SignupForm } from '@wasp/auth/forms/Signup'
```tsx title="src/SignupPage.tsx"
import {
SignupForm,
FormError,
FormInput,
FormItemGroup,
FormLabel,
} from '@wasp/auth/forms/internal/Form'
} from 'wasp/client/auth'

export const SignupPage = () => {
return (
Expand Down
Loading

0 comments on commit a5f8c5d

Please sign in to comment.