Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
4 changes: 2 additions & 2 deletions docs/content/1.getting-started/1.index.md
Original file line number Diff line number Diff line change
Expand Up @@ -55,10 +55,10 @@ Here's the source-code https://github.com/sidebase/nuxt-auth-example of the exam

## Application Side Session Management
::alert{type="info"}
In v0.5.0 of nuxt-auth `useSession()` will be renamed to `useAuth()`.
Prior to v0.5.0 `useAuth()` was called `useSession()`.
::
::list{type="success"}
- composable `const { signIn, signOut, status, data, lastRefreshedAt, ... } = useSession()`
- composable `const { signIn, signOut, status, data, lastRefreshedAt, ... } = useAuth()`
- Auto-refresh the session periodically
- Auto-refresh the session on tab-refocus
- Efficient session fetching: One time on page load, afterwards for specific actions (e.g., on navigation)
Expand Down
4 changes: 2 additions & 2 deletions docs/content/1.getting-started/3.quick-start.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,12 +29,12 @@ export default NuxtAuthHandler({
That's it! You can now use all user-related functionality, for example:

::alert{type="info"}
In v0.5.0 of nuxt-auth `useSession()` will be renamed to `useAuth()`.
Prior to v0.5.0 `useAuth()` was called `useSession()`.
::
::code-group
```ts [Application side]
// file: e.g ~/pages/login.vue
const { status, data, signIn, signOut } = useSession()
const { status, data, signIn, signOut } = useAuth()

status.value // Session status: `unauthenticated`, `loading`, `authenticated`
data.value // Session data, e.g., expiration, user.email, ...
Expand Down
4 changes: 2 additions & 2 deletions docs/content/3.application-side/1.index.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ description: "Application-side usage of `nuxt-auth` for Vue / Nuxt 3 apps."

On the application-side this module offers:
::list{type="success"}
- [`useSession` composable for session access and management](/nuxt-auth/application-side/session-access-and-management)
- [`useAuth` composable for session access and management](/nuxt-auth/application-side/session-access-and-management)
::alert{type="info"}
In v0.5.0 of nuxt-auth `useSession()` will be renamed to `useAuth()`.
Prior to v0.5.0 `useAuth()` was called `useSession()`.
::
- [Creation of custom sign-in pages](/nuxt-auth/application-side/custom-sign-in-page)
- [Middleware to protect your application on the application side](/nuxt-auth/application-side/protecting-pages)
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
# Session Access and Management
::alert{type="info"}
In v0.5.0 of nuxt-auth `useSession()` will be renamed to `useAuth()`.
Prior to v0.5.0 `useAuth()` was called `useSession()`.
::

The `useSession` composable is your main gateway to accessing and manipulating session-state and data. Here's the main methods you can use:
The `useAuth` composable is your main gateway to accessing and manipulating session-state and data. Here's the main methods you can use:

```ts
const {
Expand All @@ -15,7 +15,7 @@ const {
getSession,
signIn,
signOut,
} = useSession()
} = useAuth()

// Session status, either `unauthenticated`, `loading`, `authenticated`, see https://next-auth.js.org/getting-started/client#signout
status.value
Expand Down
8 changes: 4 additions & 4 deletions docs/content/3.application-side/3.custom-sign-in-page.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ To create a custom sign-in page you will need to:

To create your custom sign-in page you can use `signIn` to directly start a provider-flow once the user selected it, e.g., by clicking on a button on your custom sign-in page. Here is a very simple sign-in page that either directly starts a github-oauth sign-in flow or directly signs in the user via the credentials flow:
::alert{type="info"}
In v0.5.0 of nuxt-auth `useSession()` will be renamed to `useAuth()`.
Prior to v0.5.0 `useAuth()` was called `useSession()`.
::
```vue
<!-- file: ~/pages/login.vue -->
Expand All @@ -30,7 +30,7 @@ definePageMeta({
}
})

const { signIn } = useSession()
const { signIn } = useAuth()
</script>
```

Expand Down Expand Up @@ -89,10 +89,10 @@ Above we use the [guest mode](/nuxt-auth/application-side/guest-mode). This opti

You can handle sign-in errors yourself by calling `signIn` with `redirect: false` and inspecting its result for errors. For example:
::alert{type="info"}
In v0.5.0 of nuxt-auth `useSession()` will be renamed to `useAuth()`.
Prior to v0.5.0 `useAuth()` was called `useSession()`.
::
```ts
const { signIn } = useSession()
const { signIn } = useAuth()

const mySignInHandler = async ({ username, password }: { username: string, password: string }) => {
const { error, url } = await signIn('credentials', { username, password, redirect: false })
Expand Down
8 changes: 4 additions & 4 deletions docs/content/3.application-side/4.protecting-pages.md
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ Creating a custom middleware is an advanced, experimental option and may result

To implement your custom middleware:
1. Create an application-side middleware that applies either globally or is named (see [the Nuxt docs for more](https://nuxt.com/docs/guide/directory-structure/middleware#middleware-directory))
2. Add logic based on `useSession` to it
2. Add logic based on `useAuth` to it

When adding the logic, you need to watch out when calling other `async` composable functions. This can lead to `context`-problems in Nuxt, see [the explanation for this here](https://github.com/nuxt/framework/issues/5740#issuecomment-1229197529). In order to avoid these problems, you will need to either:
- use the undocumented `callWithNuxt` utility when `await`ing other composables,
Expand All @@ -99,7 +99,7 @@ Following are examples of both kinds of usage:
```ts [direct return]
// file: ~/middleware/authentication.global.ts
export default defineNuxtRouteMiddleware((to) => {
const { status, signIn } = useSession()
const { status, signIn } = useAuth()

// Return immeadiatly if user is already authenticated
if (status.value === 'authenticated') {
Expand All @@ -122,7 +122,7 @@ export default defineNuxtRouteMiddleware((to) => {
// It's important to do this as early as possible
const nuxtApp = useNuxtApp()

const { status, signIn } = useSession()
const { status, signIn } = useAuth()

// Return immeadiatly if user is already authenticated
if (status.value === 'authenticated') {
Expand All @@ -139,7 +139,7 @@ export default defineNuxtRouteMiddleware((to) => {
```
::
::alert{type="info"}
In v0.5.0 of nuxt-auth `useSession()` will be renamed to `useAuth()`.
Prior to v0.5.0 `useAuth()` was called `useSession()`.
::

## Guest Mode
Expand Down
4 changes: 2 additions & 2 deletions docs/content/4.server-side/4.rest-api.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ All endpoints that NextAuth.js supports are also supported by `nuxt-auth`:

The `basePath` is `/api/auth` per default and [can be configured in the `nuxt.config.ts`](/nuxt-auth/configuration/nuxt-config).

You can directly interact with these API endpoints if you wish to, it's probably a better idea to use `useSession` where possible though. [See the full rest API documentation of NextAuth.js here](https://next-auth.js.org/getting-started/rest-api).
You can directly interact with these API endpoints if you wish to, it's probably a better idea to use `useAuth` where possible though. [See the full rest API documentation of NextAuth.js here](https://next-auth.js.org/getting-started/rest-api).
::alert{type="info"}
In v0.5.0 of nuxt-auth `useSession()` will be renamed to `useAuth()`.
Prior to v0.5.0 `useAuth()` was called `useSession()`.
::
4 changes: 2 additions & 2 deletions docs/content/5.recipes/4.custom-session-data.md
Original file line number Diff line number Diff line change
Expand Up @@ -88,10 +88,10 @@ Notice that in the `jwt` callback we pass both the `access_token` and the `role`
After that you can access the new fields in the data portion of the session object:

::alert{type="info"}
In v0.5.0 of nuxt-auth `useSession()` will be renamed to `useAuth()`.
Prior to v0.5.0 `useAuth()` was called `useSession()`.
::
```ts
const { status, data } = useSession();
const { status, data } = useAuth();

console.log(data);

Expand Down
4 changes: 2 additions & 2 deletions docs/content/6.resources/4.prior-work.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,6 @@ In our investigation we found prior attempts to make NextAuth.js framework agnos
- [NextAuth.js app examples](https://github.com/nextauthjs/next-auth/tree/main/apps)
- [Various comments, proposals, ... of this thread](https://github.com/nextauthjs/next-auth/discussions/3942), special thanks to @brillout for starting the discussion, @balazsorban44 for NextAuth.js and encouraging the discussion, @wobsoriano for adding PoCs for multiple languages

The main part of the work was to piece everything together, resolve some outstanding issues with existing PoCs, add new things where nothing existed yet, e.g., for the `useSession` composable by going through the NextAuth.js client code and translating it to a Nuxt 3 approach.
The main part of the work was to piece everything together, resolve some outstanding issues with existing PoCs, add new things where nothing existed yet, e.g., for the `useAuth` composable by going through the NextAuth.js client code and translating it to a Nuxt 3 approach.

The module had another big iteration in collaboration with @JoaoPedroAS51 to make `useSession` a sync operation and trigger the session lifecycle from a plugin rather than the `useSession` composable itself.
The module had another big iteration in collaboration with @JoaoPedroAS51 to make `useAuth` a sync operation and trigger the session lifecycle from a plugin rather than the `useAuth` composable itself.