June 2023 Summaries

PropelAuth has released support for Next.js 13 and its App Router, enabling authentication integration for both App Router and Pages Router applications in server-side and client-side contexts, including API routes and components. The updated library allows developers to retrieve user authentication data from server components and access additional details such as organizations and role-based access control, while Pages Router users can obtain user and organization information through getServerSideProps. Documentation is available to help developers add authentication, authorization, and organization management to Next.js 13 applications.

PropelAuth hosts configurable login, signup, and organization-management interfaces and lets developers control where users are redirected after authentication. A default post-login and post-logout destination can be configured in the Dashboard’s Frontend Integration settings, while frontend libraries allow individual login or signup actions to override that destination through a post-login redirect URL. This supports fixed destinations such as an onboarding or account page, dynamically generated URLs containing contextual values such as instance IDs, and returning users to the exact page they were viewing through the current browser location. Applications can also automate current-page redirects for protected routes through components such as RedirectToLogin and RequiredAuthProvider. For preview deployments on platforms including Netlify, Vercel, and Render, developers must register the preview URL as an additional frontend location, after which current-location redirects can return users to the appropriate deployment.

PropelAuth has introduced API Key authentication, allowing products to issue unique keys for users, organizations, or backend-to-backend communication and supporting browserless tools such as cURL and CLIs without requiring a user interface. Personal keys are linked to individual users and become invalid if those users are blocked or deleted, while organization keys are associated with organizations and can optionally be revoked when their creators leave; generic keys are created programmatically and have no user or organization association. Administrators can enable personal or organization key features in the dashboard, select hosted key-management pages, and direct customers to those pages to create keys. Customers then submit keys in request headers, and applications can use PropelAuth validation endpoints to confirm authenticity and retrieve associated user or organization details and configurable metadata.

A developer explored adding QR-based mobile authentication to a React/Express starter application, inspired by QR code design tools discussed on Hacker News. The proposed use case involves users who are already logged in on a desktop scanning a QR code to receive a passwordless magic-link login on their phone, potentially landing directly on a relevant setup or permissions page. The implementation adds a frontend QR page using the qrcode.react library, which requests a new mobile login link from a protected backend endpoint and renders that link as a QR code. The backend validates the existing user’s token, creates a magic link using the user’s email, and returns it as JSON. While presented as a minimal proof of concept, the approach could be integrated into onboarding flows or modals, enhanced with post-login redirects, and customized with more visually elaborate QR code designs.