feat: Implement passwordless authentication with Email and OTP #31
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This commit introduces a passwordless authentication flow using Auth.js (NextAuth) in the frontend application. Key features: - Users can sign in using their email address and a One-Time Password (OTP). - A mock SMTP server is used, which outputs the OTP to the console during development/testing. - Auth.js is configured with an EmailProvider, custom OTP generation, and a JWT session strategy. - UI components for sign-in, sign-out, and an email entry page (`/auth/signin`) have been added. - The main header now displays authentication status and buttons. - A `SessionProvider` wraps the application to make session state available. - The `/profile` page is added as an example of a protected route, redirecting unauthenticated users. - The Next.js middleware has been updated to handle authentication state and protect routes, working in conjunction with the existing internationalization middleware. - `NEXTAUTH_URL` and `NEXTAUTH_SECRET` environment variables are now included in `.env.example`. - Manual testing instructions (`MANUAL_TESTING.md`) are provided to guide your verification of the authentication flow.
This commit addresses two issues that arose after the initial passwordless authentication setup:
1. **i18n Import Error in Middleware:**
- Corrected the import of i18n configuration in `frontend/src/middleware.ts`.
- Changed from `import { i18n } from '@/i18n'` to `import { locales, localePrefix } from '@/i18n'`.
- Defined `defaultLocale` within the middleware as it was not exported directly.
- Updated middleware logic to use the correctly imported i18n values.
2. **`oidc-token-hash` TypeError in Middleware:**
- A `TypeError: Cannot read properties of undefined (reading 'substring')` was occurring in `oidc-token-hash/lib/shake256.js` when the middleware was processed in the Edge runtime, particularly when accessing auth-related pages.
- To mitigate this, the NextAuth API route (`frontend/src/app/api/auth/[...nextauth]/route.ts`) has been explicitly set to use the Node.js runtime by adding `export const runtime = 'nodejs'`. This ensures core authentication operations execute in an environment where dependencies like `openid-client` (which uses `oidc-token-hash`) are more stable.
These changes should ensure the middleware functions correctly and the authentication pages are accessible without runtime errors.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This commit introduces a passwordless authentication flow using Auth.js (NextAuth) in the frontend application.
Key features:
/auth/signin) have been added.SessionProviderwraps the application to make session state available./profilepage is added as an example of a protected route, redirecting unauthenticated users.NEXTAUTH_URLandNEXTAUTH_SECRETenvironment variables are now included in.env.example.MANUAL_TESTING.md) are provided to guide your verification of the authentication flow.