Skip to content

Commit

Permalink
docs(auth): correct @auth/qwik documentation and add migration guide (Q…
Browse files Browse the repository at this point in the history
  • Loading branch information
cwoolum committed Jul 31, 2024
1 parent ee8b9c5 commit 14b27c8
Showing 1 changed file with 41 additions and 10 deletions.
51 changes: 41 additions & 10 deletions packages/docs/src/routes/docs/integrations/authjs/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ contributors:
- VinuB-Dev
- hugomonte
- VarPDev
- cwoolum
updated_at: '2023-10-15T10:10:17Z'
created_at: '2023-04-24T10:35:21Z'
---
Expand Down Expand Up @@ -56,6 +57,36 @@ and create a new file named `plugin@auth.ts` with an example configuration.
> - HOST_HEADER: This header helps identify the original host requested by the client. It is particularly necessary when your Node environment is behind a proxy or load balancer. Set this variable to:
> HOST_HEADER=X-Forwarded-Host
### Migrating from `@builder.io/qwik-auth`

When migrating from `@builder.io/qwik-auth` to `@auth/qwik`, there are a couple changes that need to be made.

1. The routes provided by the auth library are no longer prefixed with `/api`. If your are using previous guidance for protected routes or calling the auth routes directly, please be sure to update accordingly.

```diff
export const onRequest: RequestHandler = (event) => {
const session: Session | null = event.sharedMap.get('session');
if (!session || new Date(session.expires) < new Date()) {
- throw event.redirect(302, `/api/auth/signin?redirectTo=${event.url.pathname}`);
+ throw event.redirect(302, `/auth/signin?redirectTo=${event.url.pathname}`);
}
};
```

2. The setup function and and methods exported by it have changed in `plugin@auth.ts`. Be sure to update the imports for the `useAuthSession`, `useAuthSignin`, and `useAuthSignout` methods anywhere you use them in your app.

```diff
import Auth0Provider from "@auth/core/providers/auth0";
-import { serverAuth$ } from "@builder.io/qwik-auth";
+import { QwikAuth$ } from "@auth/qwik";

-export const { onRequest, useAuthSession, useAuthSignin, useAuthSignout } =
- serverAuth$(({ env }) => ({
+export const { onRequest, useSession, useSignIn, useSignOut } =
+ QwikAuth$(({ env }) => ({
```



## Qwik API

Expand Down Expand Up @@ -166,43 +197,43 @@ All the same REST APIs as provided by Auth.js are available.

### signin

**GET /api/auth/signin**
**GET /auth/signin**

Displays the built-in/unbranded sign-in page.

**POST /api/auth/signin/:provider**
**POST /auth/signin/:provider**

Starts a provider-specific sign-in flow. In the case of an OAuth provider, calling this endpoint will initiate the Authorization Request to your Identity Provider. This endpoint is also used by the [useSignIn](#useSignIn) action internally.

### callback

**GET/POST /api/auth/callback/:provider**
**GET/POST /auth/callback/:provider**

### signout

**GET /api/auth/signout**
**GET /auth/signout**

Displays the built-in/unbranded sign out page.

**POST /api/auth/signout**
**POST /auth/signout**

Handles signing the user out - this is a POST submission to prevent malicious links from triggering signing a user out without their consent. The user session will be invalidated/removed from the cookie/database, depending on the flow you chose to store sessions. This endpoint is also used by the [useSignOut](#useSignOut) method internally.

### session

**GET /api/auth/session**
**GET /auth/session**

Returns client-safe session object - or an empty object if there is no session. The contents of the session object that is returned are configurable with the session callback. Session data can also be retrieved using the [useSession](#useSession) routerLoader.

### csrf

**GET /api/auth/csrf**
**GET /auth/csrf**

Returns object containing CSRF token. In NextAuth.js, CSRF protection is present on all authentication routes. It uses the "double submit cookie method", which uses a signed HttpOnly, host-only cookie. The CSRF token returned by this endpoint must be passed as form variable named csrfToken in all POST submissions to any API endpoint.

### providers

**GET /api/auth/providers**
**GET /auth/providers**

Returns a list of configured OAuth services and details (e.g. sign in and callback URLs) for each service. It is useful to dynamically generate custom sign up pages and to check what callback URLs are configured for each OAuth provider that is configured.

Expand All @@ -224,7 +255,7 @@ export const { onRequest, useSession, useSignIn, useSignOut } = QwikAuth$(
);
```

> *IMPORTANT*: Make sure to keep the `onRequest` export as it is used to handle the oAuth flow redirects. Once the user finished oAuth flow, GitHub (or any other provider) will redirect the user back to the application to `/api/auth/callback/github` (or `/api/auth/callback/[otherProvider]`). The `onRequest` middleware function will handle requests to this endpoint and finish the oAuth flow.
> *IMPORTANT*: Make sure to keep the `onRequest` export as it is used to handle the OAuth flow redirects. Once the user finished OAuth flow, GitHub (or any other provider) will redirect the user back to the application to `/auth/callback/github` (or `/auth/callback/[otherProvider]`). The `onRequest` middleware function will handle requests to this endpoint and finish the OAuth flow.
3. Create or edit the `.env.local` file at the root of your project to store secrets

Expand Down Expand Up @@ -292,7 +323,7 @@ Session data can be accessed via the route `event.sharedMap`. So a route can be
export const onRequest: RequestHandler = (event) => {
const session: Session | null = event.sharedMap.get('session');
if (!session || new Date(session.expires) < new Date()) {
throw event.redirect(302, `/api/auth/signin?redirectTo=${event.url.pathname}`);
throw event.redirect(302, `/auth/signin?redirectTo=${event.url.pathname}`);
}
};
```
Expand Down

0 comments on commit 14b27c8

Please sign in to comment.