From 80d0a6906a9c7c9314932b3b744921bc9bc5b6de Mon Sep 17 00:00:00 2001
From: Pasquale De Lucia <pasquale.delucia96@gmail.com>
Date: Mon, 20 Nov 2023 08:13:26 +0100
Subject: [PATCH] docs(auth.js): add credentials example (#5462)

---
 packages/docs/src/routes/api/qwik/index.md    |  2 +-
 .../routes/docs/integrations/authjs/index.mdx | 47 +++++++++++++++++++
 2 files changed, 48 insertions(+), 1 deletion(-)

diff --git a/packages/docs/src/routes/api/qwik/index.md b/packages/docs/src/routes/api/qwik/index.md
index 71674cd86fd..4cdb14e4fcf 100644
--- a/packages/docs/src/routes/api/qwik/index.md
+++ b/packages/docs/src/routes/api/qwik/index.md
@@ -1924,7 +1924,7 @@ At times it is necessary to store values on a store that are non-serializable. N
 
 You can use `noSerialize()` to mark a value as non-serializable. The value is persisted in the Store but does not survive serialization. The implication is that when your application is resumed, the value of this object will be `undefined`. You will be responsible for recovering from this.
 
-See: [noSerialize Tutorial](https://qwik.builder.io/tutorial/store/no-serialize)
+See: [noSerialize Tutorial](http://qwik.builder.io/tutorial/store/no-serialize)
 
 ```typescript
 noSerialize: <T extends object | undefined>(input: T) => NoSerialize<T>;
diff --git a/packages/docs/src/routes/docs/integrations/authjs/index.mdx b/packages/docs/src/routes/docs/integrations/authjs/index.mdx
index 7ca486ecd4c..524f2b82dfe 100644
--- a/packages/docs/src/routes/docs/integrations/authjs/index.mdx
+++ b/packages/docs/src/routes/docs/integrations/authjs/index.mdx
@@ -251,6 +251,53 @@ AUTH_SECRET=
 4. The application is now ready to implement authentication using Auth.js.
 5. Enjoy!
 
+### Credentials
+
+> Warning: This functionality is discourage by Auth.js.
+>
+> https://next-auth.js.org/providers/credentials
+>
+> - The functionality provided for credentials based authentication is intentionally limited to discourage use of passwords due to the inherent security risks associated with them and the additional complexity associated with supporting usernames and passwords.
+
+1. Since the default `plugin@auth.ts` uses GutHub as an example, we need to replace it with Credentials.
+```ts title="src/routes/plugin@auth.ts"
+import { serverAuth$ } from '@builder.io/qwik-auth';
+import Credentials from "@auth/core/providers/credentials";
+import type { Provider } from '@auth/core/providers';
+
+export const { onRequest, useAuthSession, useAuthSignin, useAuthSignout } = serverAuth$(
+  ({ env }) => ({
+    secret: env.get("AUTH_SECRET"),
+    trustHost: true,
+    providers: [
+      Credentials({
+        async authorize(credentials, req) {
+          // Add logic here to look up the user from the credentials supplied
+          const user = {
+            id: 1,
+            name: "Mike",
+            email: "mike@example.com",
+          };
+
+          return user;
+        },
+      }),
+    ] as Provider[],
+  })
+);
+```
+
+2. Create or edit the `.env.local` file at the root of your project to store secrets
+
+```bash title=".env.local"
+AUTH_SECRET=
+```
+
+> *IMPORTANT*: Please read the Qwik documentation about [Environment Variables](/docs/env-variables/) to ensure you are using them safely. Many provider secrets should be kept secure and not exposed to the client/browser.
+
+3. The application is now ready to implement authentication using Auth.js.
+4. Enjoy!
+
 ### Route Protection
 
 Session data can be accessed via the route `event.sharedMap`.  So a route can be protected and redirect using something like this located in a `layout.tsx` or page `index.tsx`: