creates arp sign-in button

src/applications/accredited-representative-portal/components/common/SignInButton.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { createOAuthRequest } from 'platform/utilities/oauth/utilities';
+import { SERVICE_PROVIDERS } from 'platform/user/authentication/constants';
+
+export default function ARFSignInButton({ csp }) {
+  if (!csp) return null;
+  const { image } = SERVICE_PROVIDERS[csp];
+
+  const onClick = async e => {
+    e.preventDefault();
+
+    const url = await createOAuthRequest({
+      application: 'arp',
+      clientId: 'vaweb',
+      type: csp,
+    });
+
+    window.location = url;
+  };
+
+  return (
+    <button
+      type="button"
+      className={`arf usa-button ${csp}-button`}
+      onClick={onClick}
+    >
+      Sign in with {image}
+    </button>
+  );
+}
+
+ARFSignInButton.propTypes = {
+  application: PropTypes.string,
+  csp: PropTypes.string,
+};

src/applications/accredited-representative-portal/containers/LandingPage.jsx

@@ -5,6 +5,8 @@ import { VaLoadingIndicator } from '@department-of-veterans-affairs/component-li
 
 import { selectUserProfile, selectIsUserLoading } from '../selectors/user';
 import { SIGN_IN_URL } from '../constants';
+// uncomment when ready to enable
+// import SignInButton from '../components/common/SignInButton';
 import LandingPageWelcome from '../components/LandingPageWelcome/LandingPageWelcome';
 
 const LandingPage = () => {
@@ -44,6 +46,7 @@ const LandingPage = () => {
             >
               Sign in or create account
             </a>
+            {/* <SignInButton csp="logingov" /> */}
           </div>
         </div>
       </div>

src/applications/accredited-representative-portal/sass/accredited-representative-portal.scss

@@ -25,7 +25,7 @@
   &__look-and-feel {
     background: linear-gradient(
       to left,
-      var(--vads-color-primary-alt)10%,
+      var(--vads-color-primary-alt) 10%,
       var(--vads-color-primary-alt-dark) 40%,
       var(--vads-color-primary-alt-darkest)
     );
@@ -69,3 +69,40 @@
     font-weight: 700;
   }
 }
+
+/* used for login button styling consitencies */
+button.arf {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  max-width: 330px;
+  padding: 0.75em;
+  font-size: 16px;
+  margin: 1em 0;
+  white-space: normal !important;
+
+  &.idme-button {
+    background: var(--vads-color-success-dark);
+
+    &:hover {
+      background: var(
+        --vads-button-color-background-primary-alt-active-on-light
+      );
+    }
+  }
+
+  &.logingov-button {
+    background: var(--vads-color-secondary);
+
+    &:hover {
+      background: var(--vads-color-secondary-darkest);
+    }
+  }
+
+  img,
+  svg {
+    height: 1em;
+    padding: 0 0.25em;
+  }
+}

src/platform/utilities/oauth/constants.js

@@ -39,6 +39,7 @@ export const COOKIES = {
 };
 
 export const OAUTH_KEYS = {
+  APPLICATION: 'application',
   CLIENT_ID: 'client_id',
   CODE_CHALLENGE: 'code_challenge',
   CODE_CHALLENGE_METHOD: 'code_challenge_method',
@@ -77,6 +78,7 @@ export const AUTHORIZE_KEYS_WEB = generateOAuthKeysWithout([
   'CODE_VERIFIER',
   'CODE',
   'REDIRECT_URI',
+  'APPLICATION',
 ]);
 
 export const AUTHORIZE_KEYS_MOBILE = generateOAuthKeysWithout([

src/platform/utilities/oauth/utilities.js

@@ -1,7 +1,7 @@
 /* eslint-disable camelcase */
 import environment from 'platform/utilities/environment';
 import recordEvent from 'platform/monitoring/record-event';
 import { teardownProfileSession } from 'platform/user/profile/utilities';
 import { updateLoggedInStatus } from 'platform/user/authentication/actions';
 import {
   AUTH_EVENTS,
@@ -134,6 +134,7 @@
   const usedClientId = clientId || oAuthOptions.clientId;
   // Build the authorization URL query params from config
   const oAuthParams = {
+    ...(application && { [OAUTH_KEYS.APPLICATION]: application }),
     [OAUTH_KEYS.CLIENT_ID]: encodeURIComponent(usedClientId),
     [OAUTH_KEYS.ACR]: usedAcr,
     [OAUTH_KEYS.RESPONSE_TYPE]: OAUTH_ALLOWED_PARAMS.CODE,