WIP: BKND.io Integration #48
Conversation
…is change enhances clarity in the component's intended framework, ensuring better compatibility and understanding for future development.
- Integrated backend action for user creation, redirecting to the dashboard upon successful registration. - Updated form action to utilize the new backend createUser action, enhancing the sign-up process. - Improved user experience by ensuring immediate feedback and redirection after successful account creation.
- Renamed the `createUser` action to `signUp` for clarity and consistency with the sign-up process. - Updated the sign-up action to handle user creation and store the user in `context.locals`. - Enhanced the sign-up page to utilize the new `signUp` action, ensuring proper redirection upon successful registration. - Improved input validation by removing optional fields and enforcing required fields for user registration.
…splay - Improved error handling in the backend user creation action to return specific error messages. - Updated the sign-up page to correctly display error messages from the backend, enhancing user feedback during the registration process.
- Updated the sign-in page to redirect users to the dashboard if already authenticated. - Changed the action for sign-in to use `actions.bknd.signIn` for better clarity and consistency. - Enhanced error handling to display specific error messages from the backend during the sign-in process.
- Replaced direct session check with API call to get user information. - Improved redirection logic to ensure users are redirected to the sign-in page if not authenticated.
- Removed console logging of user information in middleware for cleaner code. - Updated sign-in action to set authentication cookies with secure attributes, improving security. - Enhanced error handling in sign-in process to return specific error messages from the backend. - Refactored sign-in page to utilize API for user retrieval, ensuring proper redirection for authenticated users.
…nd redirecting to the home page
- Updated the Navbar component in the dashboard to include an "Admin" link alongside the "Sign Out" link, improving user navigation options. - Introduced a new links array for better maintainability and readability of the navigation links.
- Added a check for user authentication in the admin page, redirecting to the sign-in page if no user is found. - Ensured that the styles are imported correctly for consistent UI presentation.
- Introduced a new schema for posts and comments using the bknd data model, defining required fields and relationships. - Updated the API server configuration to enable authentication with JWT, including a random secret for security. - Added initial data seeding for posts to improve the setup process.
- Updated the API schema to include a required 'publishDate' field for posts, improving data structure. - Modified the data seeding process to include 'publishDate' for initial posts. - Refactored the posts index page to fetch posts dynamically from the API and display the 'publishDate' correctly. - Adjusted the rendering of post content to ensure accurate display of information.
- Updated the sign-in and sign-up pages to redirect authenticated users to the "/admin" route instead of "/dashboard". - Introduced API calls to retrieve user information, ensuring proper redirection based on authentication status.
- Changed the link text from "Dashboard" to "Admin" for authenticated users in the posts index page. - This aligns with recent updates to user redirection and enhances clarity in navigation for users.
…anagement - Added try-catch blocks to handle errors during user registration and login processes. - Implemented token storage in cookies upon successful authentication, enhancing security. - Improved error messages for failed user creation and sign-in attempts, providing clearer feedback. - Ensured user data is set in context after successful authentication, maintaining session integrity.
- Moved the import of "bknd/dist/styles.css" into a <script> tag for better organization and to ensure styles are applied correctly. - This change enhances the maintainability of the code and aligns with best practices for script and style management.
- Updated components and pages to replace session checks with user checks for authentication. - This change ensures consistency in user authentication handling across the application, improving clarity and maintainability.
- Updated the cookie settings for storing authentication tokens to use `encodeURIComponent` for proper encoding. - Changed the `sameSite` attribute from "strict" to "lax" to improve compatibility with cross-site requests. - These changes enhance security and ensure better handling of authentication tokens in the application.
- Updated cookie management for authentication tokens to store them without encoding, enhancing security and compatibility. - Changed cookie expiration handling to use an explicit expiration date instead of maxAge. - Simplified sign-in page logic to redirect users based on authentication status, improving clarity and user experience. - Removed unnecessary imports and components from the sign-in page for better maintainability.
❌ Deploy Preview for freedom-stack failed.
|
src/actions/bknd.ts
Outdated
| if (data.token) { | ||
| context.cookies.set("auth", data.token, { | ||
| httpOnly: true, | ||
| secure: true, | ||
| expires: new Date(Date.now() + 60 * 60 * 24 * 7 * 1000), | ||
| sameSite: "lax" | ||
| }); | ||
| } |
There was a problem hiding this comment.
@dswbx, do you by any chance know the best way for me to save and store this cookie so that auth can be persistent?
When this cookie is set and I visit /admin, it gets deleted. However, when I log in via /admin/auth/login and fill in my credentials, then the cookie is set and persists.
What do you recommend doing here?
This is in context of an Astro Action
There was a problem hiding this comment.
Sorry, this was meant for the signIn, just a couple of lines below
There was a problem hiding this comment.
Sorry I totally missed this, not sure if I received a notification :/
Actually, the cookie should be set for you automatically when POST-ing to /api/auth/password/login, the redirect Response sets them. But I'll take a closer look and let you know.
src/actions/bknd.ts
Outdated
| if (data.token) { | ||
| context.cookies.set("auth", data.token, { | ||
| httpOnly: true, | ||
| secure: true, | ||
| expires: new Date(Date.now() + 60 * 60 * 24 * 7 * 1000), | ||
| sameSite: "lax" | ||
| }); | ||
| } |
There was a problem hiding this comment.
Sorry, this was meant for the signIn, just a couple of lines below
src/pages/admin/[...admin].astro
Outdated
| <script> | ||
| import "bknd/dist/styles.css"; | ||
| </script> |
There was a problem hiding this comment.
I moved the styles down here. May be an Astro v5 thing with how scripts are handled, but this helps the styles persist. When I imported it in between the --- and --- in the past, then the styles didn't always surface on the /admin pages.
- Introduced BKND integration to manage posts and comments with a defined schema. - Implemented user authentication actions for sign-up and sign-in, including error handling and token management. - Configured backend connection settings and admin route for BKND. - Created temporary API and admin files for dynamic route handling. - Updated imports to reflect new integration structure, enhancing maintainability.
- Deleted temporary admin and API files from the BKND integration, streamlining the project structure. - Updated .gitignore to include the new temporary directory for BKND, ensuring unnecessary files are not tracked.
…and redirect on success
| <h1>Sign In</h1> | ||
| <form class="flex flex-col gap-4 max-w-sm w-full" method="POST" action={actions.auth.signIn}> | ||
| <form x-ref="form" class="flex flex-col gap-4 max-w-sm w-full" method="POST" x-on:submit.prevent="post"> |
There was a problem hiding this comment.
@cameronapak the "cookie not being set" issue is probably due to submitting the form with fetch/xhr instead of natively POST-ing to that endpoint. In order to set a (secure) cookie, you need a page load. Can you confirm this is working with a native submit?
What's the main reason for not using a native submit, is it the redirect? Because you can set the success redirect in the auth settings (auth.cookie.pathSuccess). I actually also prepared using /api/auth/password/login?redirect=... but haven't implemented it yet, could be done quickly if that's your main concern
There was a problem hiding this comment.
That would be wonderful to have a redirect param
There was a problem hiding this comment.
bknd-io/bknd#65 I'll add this to the 0.7 release :)
There was a problem hiding this comment.
btw I've added bknd-io/bknd#66 to the 0.7 release. This will also send cookies for both form and json requests. You'd then only need to make sure to include credentials:
const response = await fetch(window.location.origin + "/api/auth/password/login", {
method: "POST",
+ credentials: "include",
+ headers: { ContentType: "application/json" },
body: formData
});And then you don't need to check the response for a redirection, just check the payload if it doesn't include an error (you may also check as response.ok)
| - [ ] Remove the Dashboard | ||
| - [ ] Make sure auth is guarded after initial start | ||
| - [ ] Add ability to target Turso db URL for PROD | ||
| - [ ] Figure out how to remove the anchor underlines in the admin |
There was a problem hiding this comment.
I see, that's actually a tricky one. It comes from @astrojs/tailwind/base.css but somehow the global.css is not imported for the BKND routes, so I can't override the underlines
There was a problem hiding this comment.
Great question. Every once in a while, I see every hyperlink is underlined. I think I may have fixed it. I think it's an Astro v5 issue with styling, because it's not consistent.
There was a problem hiding this comment.
I've pulled the latest changes, I still have the underlines 🤔 really weird, can't find a way to add some style overrides...
btw mind to upgrade BKND to 0.6.2 (latest)? I've added more schema controls (e.g. right click on entities) and user-creation in UI
This will be v3 of Freedom Stack. https://bknd.io/ integration helps create an opinionated and stable backend option for Freedom Stack.