[PROTO-1787] Add full screen oauth variant

docs/docs/developers/guides/log-in-with-audius.mdx

@@ -348,6 +348,8 @@ You must open this page with the required URL parameters, described below.
   whether the auth flow response parameters will be encoded in the query string or the fragment
   component of the redirect_uri when redirecting back to your app. Default behavior is equivalent to
   "fragment". We recommend NOT changing this if possible.
+- `display` _optional_ `"popup" | "fullScreen"` - determines whether the auth flow expects to be
+  rendered in a popup or a full screen view. Defaulted to `"popup"` if unspecified.
 
 **Example**
 

packages/ddex/webapp/client/src/pages/Login/Login.tsx

@@ -20,7 +20,8 @@ const Login = () => {
     if (audiusSdk && auto) {
       audiusSdk.oauth!.login({
         scope: 'write',
-        redirectUri: new URL(window.location.href).origin
+        redirectUri: new URL(window.location.href).origin,
+        display: 'fullScreen'
       })
     }
   }, [audiusSdk, auto])

packages/libs/src/sdk/oauth/OAuth.ts

@@ -191,11 +191,13 @@ export class OAuth {
   login({
     scope = 'read',
     params,
-    redirectUri = 'postMessage'
+    redirectUri = 'postMessage',
+    display = 'popup'
   }: {
     scope?: OAuthScope
     params?: WriteOnceParams
     redirectUri?: string
+    display?: 'popup' | 'fullScreen'
   }) {
     const scopeFormatted = typeof scope === 'string' ? [scope] : scope
     if (!this.config.appName && !this.apiKey) {
@@ -249,7 +251,8 @@ export class OAuth {
 
     const fullOauthUrl = `${
       OAUTH_URL[this.env]
-    }?scope=${effectiveScope}&state=${csrfToken}&redirect_uri=${redirectUri}&origin=${originURISafe}&${appIdURIParam}${writeOnceParams}`
+    }?scope=${effectiveScope}&state=${csrfToken}&redirect_uri=${redirectUri}&origin=${originURISafe}&${appIdURIParam}${writeOnceParams}&display=${display}`
+
     if (redirectUri === 'postMessage') {
       this.activePopupWindow = window.open(fullOauthUrl, '', windowOptions)
       this._clearPopupCheckInterval()

packages/web/src/pages/oauth-login-page/OAuthLoginPage.module.css

@@ -1,12 +1,16 @@
-.bgWhite {
-  background-color: var(--harmony-static-white);
-}
-
 .wrapper {
-  margin: 0 auto;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
   justify-content: center;
-  width: 375px;
   display: flex;
+  overflow: scroll;
+}
+
+.popup {
+  background-color: var(--harmony-static-white);
 }
 
 .centeredContent {
@@ -29,7 +33,7 @@
   text-overflow: ellipsis;
 }
 
-.loadingStateContainer {
+.popup .loadingStateContainer {
   margin-top: 200px;
 }
 

packages/web/src/pages/oauth-login-page/OAuthLoginPage.tsx

@@ -1,4 +1,4 @@
-import { FormEvent, useLayoutEffect, useState } from 'react'
+import { FormEvent, useState } from 'react'
 
 import { Name, ErrorLevel } from '@audius/common/models'
 import { accountSelectors, signOutActions } from '@audius/common/store'
@@ -35,12 +35,6 @@ const { signOut } = signOutActions
 const { getAccountUser } = accountSelectors
 
 export const OAuthLoginPage = () => {
-  useLayoutEffect(() => {
-    document.body.classList.add(styles.bgWhite)
-    return () => {
-      document.body.classList.remove(styles.bgWhite)
-    }
-  }, [])
   const record = useRecord()
   const account = useSelector(getAccountUser)
   const isLoggedIn = Boolean(account)
@@ -156,7 +150,8 @@ export const OAuthLoginPage = () => {
     appImage,
     userEmail,
     authorize,
-    txParams
+    txParams,
+    display
   } = useOAuthSetup({
     onError: handleAuthError,
     onPendingTransactionApproval: handlePendingTransactionApproval,
@@ -247,7 +242,7 @@ export const OAuthLoginPage = () => {
 
   if (queryParamsError) {
     return (
-      <ContentWrapper>
+      <ContentWrapper display={display}>
         <div className={cn(styles.centeredContent, styles.titleContainer)}>
           <span className={styles.errorText}>{queryParamsError}</span>
         </div>
@@ -256,7 +251,7 @@ export const OAuthLoginPage = () => {
   }
   if (loading) {
     return (
-      <ContentWrapper>
+      <ContentWrapper display={display}>
         <div
           className={cn(styles.centeredContent, styles.loadingStateContainer)}
         >
@@ -271,7 +266,7 @@ export const OAuthLoginPage = () => {
   }
 
   return (
-    <ContentWrapper>
+    <ContentWrapper display={display}>
       <Flex alignItems='center' direction='column'>
         <Flex gap='l' alignItems='center' mb='l'>
           <Flex h='88px' w='88px'>

packages/web/src/pages/oauth-login-page/components/ContentWrapper.tsx

@@ -1,9 +1,34 @@
 import { ReactNode } from 'react'
 
+import { Paper } from '@audius/harmony'
+import cn from 'classnames'
+
 import styles from '../OAuthLoginPage.module.css'
+import { Display } from '../types'
 
-export const ContentWrapper = ({ children }: { children: ReactNode }) => (
-  <div className={styles.wrapper}>
-    <div className={styles.container}>{children}</div>
+export const ContentWrapper = ({
+  display,
+  children
+}: {
+  display: Display
+  children: ReactNode
+}) => (
+  <div className={cn(styles.wrapper, { [styles.popup]: display === 'popup' })}>
+    {display === 'popup' ? (
+      <div className={styles.container}>{children}</div>
+    ) : (
+      <Paper
+        shadow='mid'
+        w='375px'
+        direction='column'
+        pv='3xl'
+        ph='xl'
+        mv='3xl'
+        alignSelf='flex-start'
+        borderRadius='xl'
+      >
+        {children}
+      </Paper>
+    )}
   </div>
 )

packages/web/src/pages/oauth-login-page/hooks.ts

@@ -19,6 +19,7 @@ import * as errorActions from 'store/errors/actions'
 import { reportToSentry } from 'store/errors/reportToSentry'
 
 import { messages } from './messages'
+import { Display } from './types'
 import {
   authWrite,
   formOAuthResponse,
@@ -47,6 +48,7 @@ export const useParsedQueryParams = () => {
     api_key: apiKey,
     origin,
     tx,
+    display: displayQueryParam,
     ...rest
   } = queryString.parse(search)
 
@@ -130,6 +132,9 @@ export const useParsedQueryParams = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isRedirectValid, parsedOrigin, parsedRedirectUri, search])
 
+  const display: Display =
+    displayQueryParam === 'fullScreen' ? 'fullScreen' : 'popup'
+
   return {
     apiKey,
     appName,
@@ -143,7 +148,8 @@ export const useParsedQueryParams = () => {
     parsedOrigin,
     error,
     tx,
-    txParams
+    txParams,
+    display
   }
 }
 
@@ -181,6 +187,7 @@ export const useOAuthSetup = ({
     parsedOrigin,
     txParams,
     tx,
+    display,
     error: initError
   } = useParsedQueryParams()
   const accountIsLoading = useSelector((state: CommonState) => {
@@ -518,6 +525,7 @@ export const useOAuthSetup = ({
     userEmail,
     authorize,
     tx,
-    txParams: txParams as WriteOnceParams
+    txParams: txParams as WriteOnceParams,
+    display
   }
 }

packages/web/src/pages/oauth-login-page/types.ts

@@ -0,0 +1 @@
+export type Display = 'popup' | 'fullScreen'