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.

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

docs(auth): correct @auth/qwik documentation and add migration guide #6730

Merged
merged 6 commits into from
Jul 31, 2024
Merged
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
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
Loading