[Issue #2653] Sign in component #3281

acouch · 2024-12-18T14:41:23Z

Summary

Fixes #2653

Time to review: 5 mins

Changes proposed

Mobile

Figma

Local

Deskstop

Figma

Local

coilysiren · 2024-12-18T16:47:54Z

infra/frontend/app-config/env-config/environment-variables.tf

@@ -44,6 +44,11 @@ locals {
      manage_method     = "manual"
      secret_store_name = "/${var.app_name}/${var.environment}/api-auth-token"
    },
+    # URL for the API login route. 
+    AUTH_LOGIN_URL = {


This isn't secret so it goes next to the NODE_OPTIONS key above

It is the same as the API_URL right?

@coilysiren Secrets knows how to read from SSM where as the standard env vars are more "constants?" Right? Or is there a way to read from SSM there too?

doug-s-nava

can we confirm that the sign in button should get the same hover indicator as the nav items? seems slightly weird to me to have two items showing the same indicator at the same time:

frontend/src/components/Header.tsx

frontend/.env.production

doug-s-nava · 2024-12-18T16:56:01Z

frontend/src/components/Header.tsx

+  const LoginLink = () => {
+    return (
+      <Link
+        href={process.env.auth_login_url as string}


this works with next dev where the variable is defined in the env file, but won't work with build && start when it's coming from SSM. The env var won't be available to the app until run time, and for a client component to pick up directly from process.env the variable needs to be:

prefixed with NEXT_PUBLIC and

available at build time

I'd recommend reading this in from process.env in the environments file, then prop drilling it down to the header component from the nearest server component. It may work to import directly from the environments file, but I doubt it.

I wish local Next/React did a better job of highlighting/blocking this anti-pattern.

@doug-s-nava b/c these pages are statically rendered, there isn't a server side place to put the env for the static pages, unless we use wrap them in a suspense boundary. @mdragon that isn't an anti-pattern, it is the rec from next documentation

That could be the way to go. As of this comment, the CDN is rendering the suspense on the search page without a loading state, meaning the header could potentially use suspense without a "flicker."

If we switch to dynamic rendering, then we could just use this pattern as is.

Noting we resolved this, decided to use a route handler for the public client side envars for the time being then will remove that once we can use dynamic routing.

frontend/next.config.js

frontend/tests/components/Header.test.tsx

frontend/src/components/Header.tsx

frontend/src/styles/_uswds-theme-custom-styles.scss

frontend/src/components/Header.tsx

doug-s-nava · 2024-12-18T17:22:21Z

Also if we're not updating the button to a logged in state when user is logged in in this change I think we need a ticket to handle that

acouch · 2024-12-20T15:58:28Z

Also if we're not updating the button to a logged in state when user is logged in in this change I think we need a ticket to handle that

@doug-s-nava this seemed like enough to chew on for a PR and the provider wasn't available when I started. I can do a follow-up for the same ticket now that the user provider is available.

* 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

…nent

acouch · 2025-01-03T18:06:26Z

frontend/src/components/Header.tsx

+
+    return (
+      <a
+        {...passHref}


This is the easiest way I could think of to disable the login button while it fetches.

And just to make sure I'm keeping all the different tickets straight, Doug has a separate ticket to hide this button behind a feature flag?

what about moving the fetch and state management into this component, and implementing a loading state (which in this case would just hide the link, I guess?)

mdragon · 2025-01-03T18:47:49Z

frontend/src/app/api/env/route.ts

+  return Response.json({
+    api_url: environment.API_URL,
+    auth_login_url: environment.AUTH_LOGIN_URL,
+    node_env: environment.NODE_ENV,


I don't see this being consumed anywhere yet, but per the discussion on the other ticket, should this use the new ENVIRONMENT since NODE_ENV is just prod everywhere except localhost?

The NODE_ENV is different than the env we set per environment. I could remove this as it isn't being used.

I removed it

doug-s-nava

a couple of nits

doug-s-nava · 2025-01-03T19:54:05Z

frontend/.env.production

-SENDY_API_URL=
-SENDY_LIST_ID=
-
-API_URL=http://api.simpler.grants.gov


doug-s-nava · 2025-01-03T19:56:10Z

frontend/src/app/api/env/route.ts

+export const dynamic = "force-dynamic";
+
+export function GET() {
+  return Response.json({


I think I misinterpreted the conversation yesterday - I thought that this route would be redirecting the request to the correct API endpoint, rather than returning the url. I know this is temporary so it's probably not a big deal, but that would save us a round trip, and then we can avoid the state management on the client. Does that raise the level complexity too much?

I'd like to keep the same pattern of getting the envar itself and pass to the component which is what we'll be moving to. The redirect also adds additional complexity for the UX, going back to get provide a proper error page etc. This seems like the easiest temporary solution.

doug-s-nava · 2025-01-03T20:01:41Z

frontend/src/components/Header.tsx

            />
          </div>
+          <div className="usa-nav__primary margin-top-0 margin-bottom-1 desktop:margin-bottom-5px text-no-wrap desktop:order-last margin-left-auto">
+            <div className="usa-nav__primary-item border-0">
+              <LoginLink auth_login_url={authLoginUrl} />


can we commit to camelCase?

Updated, thanks.

doug-s-nava · 2025-01-03T20:04:04Z

frontend/src/components/Header.tsx

+
+    return (
+      <a
+        {...passHref}


what about moving the fetch and state management into this component, and implementing a loading state (which in this case would just hide the link, I guess?)

acouch · 2025-01-03T20:22:44Z

what about moving the fetch and state management into this component

@doug-s-nava want to avoid a loading state for every page request. this way the user just gets the link, and it isn't available if there is some server issue.

acouch requested review from andycochran, btabaska, doug-s-nava, coilysiren and mdragon as code owners December 18, 2024 14:41

acouch force-pushed the acouch/issue-2653-login-component branch from 3d6abd3 to dd80b68 Compare December 18, 2024 16:01

mdragon approved these changes Dec 18, 2024

View reviewed changes

coilysiren reviewed Dec 18, 2024

View reviewed changes

doug-s-nava reviewed Dec 18, 2024

View reviewed changes

acouch force-pushed the acouch/issue-2653-login-component branch from 5b3b8af to a28c443 Compare December 19, 2024 13:46

doug-s-nava force-pushed the feature/nextjs-auth branch from 80f4046 to 99f501f Compare December 30, 2024 21:19

doug-s-nava requested review from chouinar and widal001 as code owners December 30, 2024 21:19

doug-s-nava force-pushed the feature/nextjs-auth branch from ec9bc75 to 9016bbc Compare January 2, 2025 17:20

doug-s-nava mentioned this pull request Jan 2, 2025

[Issue #3249] Feature flag manager refactor #3374

Open

1 task

doug-s-nava and others added 8 commits January 2, 2025 16:21

[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

Add sign in link

b9cfc1b

Update Header.tsx and styles

b64362c

Update Header.tsx for pa11y fix

5351586

Update environment-variables.tf for envar

ad40438

Update index.spec.ts for nav items

13c2aa4

Update index.spec.ts for e2e fix

387efeb

Update Header.tsx

0179346

acouch force-pushed the acouch/issue-2653-login-component branch from a28c443 to 0179346 Compare January 2, 2025 21:21

acouch and others added 4 commits January 3, 2025 12:46

Update header comp and env, add env route

f7eaf27

Merge branch 'feature/nextjs-auth' into acouch/issue-2653-login-compo…

e88e3e1

…nent

Update for formatting

df66118

Update next.config.js

06f9003

acouch added 2 commits January 3, 2025 13:04

Update .env.production

0b978f7

Update Header.tsx

01442c2

acouch commented Jan 3, 2025

View reviewed changes

acouch added 2 commits January 3, 2025 13:35

Update environments.ts, add route.ts

9ff0b66

Update environments.ts

a041bf3

mdragon reviewed Jan 3, 2025

View reviewed changes

acouch added 2 commits January 3, 2025 13:53

Add env/route.test.ts

43767cb

Update route.ts to remove unused vars

d3a7d7c

doug-s-nava reviewed Jan 3, 2025

View reviewed changes

Update Header.tsx

f445c93

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Issue #2653] Sign in component #3281

[Issue #2653] Sign in component #3281

acouch commented Dec 18, 2024 •

edited

Loading

coilysiren Dec 18, 2024

acouch Dec 18, 2024

mdragon Dec 19, 2024

doug-s-nava left a comment

doug-s-nava Dec 18, 2024

mdragon Dec 19, 2024 •

edited

Loading

acouch Dec 20, 2024

acouch Jan 3, 2025

doug-s-nava commented Dec 18, 2024

acouch commented Dec 20, 2024

acouch Jan 3, 2025

mdragon Jan 3, 2025

acouch Jan 3, 2025

doug-s-nava Jan 3, 2025

mdragon Jan 3, 2025

acouch Jan 3, 2025

acouch Jan 3, 2025

doug-s-nava left a comment

doug-s-nava Jan 3, 2025

doug-s-nava Jan 3, 2025

acouch Jan 3, 2025 •

edited

Loading

doug-s-nava Jan 3, 2025

acouch Jan 3, 2025

doug-s-nava Jan 3, 2025

acouch commented Jan 3, 2025

[Issue #2653] Sign in component #3281

Are you sure you want to change the base?

[Issue #2653] Sign in component #3281

Conversation

acouch commented Dec 18, 2024 • edited Loading

Summary

Time to review: 5 mins

Changes proposed

Mobile

Figma

Local

Deskstop

Figma

Local

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

doug-s-nava left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mdragon Dec 19, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

doug-s-nava commented Dec 18, 2024

acouch commented Dec 20, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

doug-s-nava left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

acouch Jan 3, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

acouch commented Jan 3, 2025

acouch commented Dec 18, 2024 •

edited

Loading

mdragon Dec 19, 2024 •

edited

Loading

acouch Jan 3, 2025 •

edited

Loading