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.js): add credentials example #5462

Merged
merged 4 commits into from
Nov 20, 2023
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
2 changes: 1 addition & 1 deletion packages/docs/src/routes/api/qwik/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
Expand Down
47 changes: 47 additions & 0 deletions packages/docs/src/routes/docs/integrations/authjs/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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 `[email protected]` uses GutHub as an example, we need to replace it with Credentials.
```ts title="src/routes/[email protected]"
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: "[email protected]",
};

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`:
Expand Down
Loading