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.

Sign up for GitHub

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

Jump to bottom

[Issue #2654] Next login flow backend #3182

Merged
merged 13 commits into from
Dec 16, 2024
Merged

[Issue #2654] Next login flow backend #3182

merged 13 commits into from
Dec 16, 2024

Conversation

doug-s-nava
Copy link
Collaborator

@doug-s-nava doug-s-nava commented Dec 11, 2024 •
edited
Loading

Summary

Fixes #2654

Time to review: 20 mins

Changes proposed

This is step 1 for implementing auth support on the Next JS application.

The change includes:

  • a new route at /api/auth/callback. This is the route that will be hit by the flask API at the completion of the login flow on that side of the application. That request will include a JSON web token in a query param that will be parsed on the Next JS side and eventually set on the client as a cookie
  • all necessary token parsing logic. Functions are created here for encrypting and decrypting the JWT and for getting and setting the token value from / on cookies
  • support for a a "SESSION_SECRET" env var. This will be generated by terraform for each environment and used for encryption of the token before setting on the client
  • an update to the terraform env vars doc, copy and pasted from the Nava platform
  • a User page and corresponding error page to redirect to for temporary testing while we continue to build out the client side login implementation

Context for reviewers

Test steps

  1. start the app on this branch with npm run dev

New Login

  1. hit http://localhost:3000/api/auth/callback?token=anyStringYouWant2Use with no cookies
  2. VERIFY: page loads with created session message
  3. use your chosen method of checking cookies on the page (ex. in Chrome, use the "Storage" tab of the developer tools), and look for a cookie named "session"
  4. VERIFY: cookie is present (see screenshot)

Existing Login

  1. hit http://localhost:3000/api/auth/callback with cookie set to a valid session cookie. Reach out to Doug if you need one, or you can grab the encrypted jwt set in the first test case
  2. VERIFY: page loads with already logged in message
  3. use your chosen method of checking cookies on the page (ex. in Chrome, use the "Storage" tab of the developer tools), and look for a cookie named "session"
  4. VERIFY: cookie is present (see screenshot)

Error Cases

  1. hit http://localhost:3000/api/auth/callback with no token param or cookies
  2. VERIFY: user page loads with no token provided message
  3. Note that there is a possible case of an "error!" message but I can't figure out a way to simulate it atm

Additional information

An example of a client side session cookie

Screenshot 2024-12-13 at 10 55 36 AM

@doug-s-nava doug-s-nava changed the title Next login flow backend [Issue #2654] Next login flow backend Dec 11, 2024
@doug-s-nava doug-s-nava force-pushed the next-login-flow-backend branch from b596f57 to 79c1d6f Compare December 12, 2024 19:59
@doug-s-nava doug-s-nava marked this pull request as ready for review December 13, 2024 16:28
doug-s-nava
doug-s-nava commented Dec 13, 2024
View reviewed changes
frontend/src/app/[locale]/not-found.tsx
@@ -24,7 +24,7 @@ export default function NotFound() {
<>
<BetaAlert />
<GridContainer className="padding-y-1 tablet:padding-y-3 desktop-lg:padding-y-15 measure-2">
<h1 className="nj-h1">{t("title")}</h1>
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks like maybe a remnant from the nj ui project?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch.

doug-s-nava
doug-s-nava commented Dec 13, 2024
View reviewed changes
frontend/src/utils/generalUtils.ts
@@ -94,3 +94,6 @@ export const findFirstWhitespace = (content: string, startAt: number): number =>
// is used by Next middleware throws a compilation error, so let's roll our own
export const camelToSnake = (camel: string) =>
camel.replace(/[A-Z]/g, (letter) => `_${letter}`);

export const encodeText = (valueToEncode: string) =>
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

moved here to ease testing so we can avoid mocking the window

@mdragon mdragon self-requested a review December 13, 2024 16:43
@doug-s-nava doug-s-nava force-pushed the next-login-flow-backend branch from 329a805 to 7ee37c5 Compare December 13, 2024 17:40
@doug-s-nava doug-s-nava changed the base branch from main to feature/nextjs-auth December 13, 2024 17:58
doug-s-nava
doug-s-nava commented Dec 13, 2024
View reviewed changes
frontend/src/app/[locale]/search/error.tsx
@@ -13,12 +13,6 @@ import SearchBar from "src/components/search/SearchBar";
import SearchFilters from "src/components/search/SearchFilters";
import ServerErrorAlert from "src/components/ServerErrorAlert";

interface ErrorProps {
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

as I removed the error page for User, this doesn't need to be moved at this point, but it's still good practice, I think, so we have it more widely available for future error pages.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we need to look a little more at error handling across the app.

mdragon
mdragon approved these changes Dec 13, 2024
View reviewed changes
Copy link
Collaborator

@mdragon mdragon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍🏻

acouch
acouch approved these changes Dec 16, 2024
View reviewed changes
Copy link
Collaborator

@acouch acouch left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀

@doug-s-nava doug-s-nava merged commit ca566bd into feature/nextjs-auth Dec 16, 2024
19 checks passed
@doug-s-nava doug-s-nava deleted the next-login-flow-backend branch December 16, 2024 16:09
doug-s-nava added a commit that referenced this pull request Dec 17, 2024
@doug-s-nava
[Issue #2654] Next login flow backend (#3182)
eaf62a3 
* adds route at /api/auth/callback to be hit by the flask API at the completion of the login flow
* adds jwt token parsing logic
* adds support for a "SESSION_SECRET" env var
* adds a User page for temporary testing
doug-s-nava added a commit that referenced this pull request Dec 30, 2024
@doug-s-nava
[Issue #2654] Next login flow backend (#3182)
46d016f 
* adds route at /api/auth/callback to be hit by the flask API at the completion of the login flow
* adds jwt token parsing logic
* adds support for a "SESSION_SECRET" env var
* adds a User page for temporary testing
doug-s-nava added a commit that referenced this pull request Jan 2, 2025
@doug-s-nava
[Issue #2654] Next login flow backend (#3182)
5a29aad 
* adds route at /api/auth/callback to be hit by the flask API at the completion of the login flow
* adds jwt token parsing logic
* adds support for a "SESSION_SECRET" env var
* adds a User page for temporary testing
acouch pushed a commit that referenced this pull request Jan 2, 2025
@doug-s-nava @acouch
[Issue #2654] Next login flow backend (#3182)
71eaf1c 
* adds route at /api/auth/callback to be hit by the flask API at the completion of the login flow
* adds jwt token parsing logic
* adds support for a "SESSION_SECRET" env var
* adds a User page for temporary testing
doug-s-nava added a commit that referenced this pull request Jan 7, 2025
@doug-s-nava
[Issue #2654] Next login flow backend (#3182)
2f2f471 
* adds route at /api/auth/callback to be hit by the flask API at the completion of the login flow
* adds jwt token parsing logic
* adds support for a "SESSION_SECRET" env var
* adds a User page for temporary testing
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@acouch acouch acouch approved these changes

@coilysiren coilysiren Awaiting requested review from coilysiren coilysiren is a code owner

@andycochran andycochran Awaiting requested review from andycochran andycochran is a code owner

@widal001 widal001 Awaiting requested review from widal001 widal001 is a code owner

@mdragon mdragon Awaiting requested review from mdragon mdragon is a code owner

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Task: Add login callback server action that receives simpler jwt and sets cookie for the frontend
3 participants
@doug-s-nava @mdragon @acouch