Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(docs): updated typescript module imports #9462

Merged
merged 3 commits into from
Dec 29, 2023
+27 −4
Merged

fix(docs): updated typescript module imports #9462

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3d57dec
docs: updated where to augment from using typescript
Huijiro Dec 25, 2023
cb38bfc
docs: added sveltekit example
Huijiro Dec 25, 2023
9d8dbe4
Merge branch 'main' into updated-type-docs
ndom91 Dec 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 27 additions & 4 deletions docs/docs/getting-started/typescript.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ Check out the [Database Adapters: TypeScript](/getting-started/adapters#typescri

## Module Augmentation

Auth.js libraries come with certain interfaces that are shared across submodules and different Auth.js libraries (For example: `next-auth` and `@auth/prisma-adapter` will rely on types from `@auth/core`).
Auth.js libraries come with certain interfaces that are shared across submodules and different Auth.js libraries (For example: `next-auth` and `@auth/prisma-adapter` will rely on types from `@auth/core/types`).

Good examples of such interfaces are `Session` or `User`. You can use TypeScript's [Module Augmentation](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation) to extend these types to add your own properties.

Expand All @@ -40,7 +40,7 @@ Let's look at `Session` for example:
// auth.ts
import NextAuth, { type DefaultSession } from "next-auth"

declare module "@auth/core" {
declare module "@auth/core/types" {
/**
* Returned by `useSession`, `getSession` and received as a prop on the `SessionProvider` React Context
*/
Expand All @@ -66,7 +66,30 @@ export const { auth } = NextAuth({

</TabItem>
<TabItem value="sveltekit" label="SvelteKit">
TODO SvelteKit

```ts
// app.d.ts
import type { DefaultSession } from '@auth/core/types';

declare module '@auth/core/types' {
/**
* Returned by `useSession`, `getSession`, and the callbacks session function.
*/
interface Session extends DefaultSession {
user: {
/** The user's postal address. */
adddress: string;

/**
* By default, TypeScript merges new interface properties and overwrite existing ones.
* In this case, the default session user properties will be overwritten, with the new one defined above.
* To keep the default session user properties, you need to add them back into the newly declared interface.
*/
} & DefaultSession['user'];
}
}
```

</TabItem>
<TabItem value="solidstart" label="SolidStart">
TODO SolidStart
Expand All @@ -81,7 +104,7 @@ export const { auth } = NextAuth({
Module augmentation is not limited to specific interfaces. You can augment almost anything, but here are some of the more common interfaces that you might need to override in based on your use-case:

```ts
declare module "@auth/core" {
declare module "@auth/core/types" {
/**
* The shape of the user object returned in the OAuth providers' `profile` callback,
* or the second parameter of the `session` callback, when using a database.
Expand Down
Loading