[C-3450] Native Social SignUp #7000

DejayJD · 2023-12-20T22:09:14Z

Description

Add logic for handling all the oauth flows
- Utilized existing saga flows for the most part
Add the ReviewHandle screen
Add the FinalizeLoginDetails screen

TODO:

More QA
I've noticed in both my testing and even our prod app sometimes Insta API calls flake, not sure why. Not sure if its a code issue on our end or something on the insta side
Fix bug with repeating the flow (clicking a social, then going back to do it again). Error shown is [object Object] so thats fun
Loading screen not going away on popup close 😢 (alternatively maybe I rework to only show loading popup after submitting on the popup? 🤔)
Solve for existing login behavior on FinalizeLoginDetails
TikTok flow not showing loading state 🤨

How Has This Been Tested?

Local simulator with ios:prod + my personal socials. Luckily my instagram triggers the "review handle" flow while my others go to the "finalize login" flow.

vercel · 2023-12-20T22:09:19Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
audius-web-ssr	⬜️ Ignored (Inspect)	Visit Preview		Jan 3, 2024 11:06pm

…jd/social-media-signon # Conflicts: # packages/common/src/messages/sign-on/pages.ts # packages/common/src/schemas/index.ts # packages/mobile/src/screens/sign-on-screen/SignOnStack.tsx

audius-infra · 2023-12-20T22:41:52Z

Preview this change https://demo.audius.co/jd/social-media-signon

audius-infra · 2023-12-20T23:24:04Z

Preview this change https://demo.audius.co/jd/social-media-signon

DejayJD · 2023-12-22T23:16:32Z

packages/harmony/src/icons/utilityIcons.ts

@@ -39,6 +39,7 @@ import IconEarningsSVG from '../assets/icons/Earnings.svg'
 import IconEmailAddressSVG from '../assets/icons/EmailAddress.svg'
 import IconEmbedSVG from '../assets/icons/Embed.svg'
 import IconErrorSVG from '../assets/icons/Error.svg'
+import IconExclamationCircleSVG from '../assets/icons/ExclamationCircle.svg'


This was previously in the temp-harmony directory I had

DejayJD · 2023-12-22T23:16:58Z

packages/mobile/src/components/oauth/OAuth.tsx

@@ -169,11 +169,25 @@ const TIKTOK_POLLER = `
 })();
 `

-const OAuth = () => {
+type OAuthProps = {


This is the webview popup, I just added in props to control it via component rather than via redux

DejayJD · 2023-12-22T23:17:25Z

packages/mobile/src/components/tiktok-auth/TikTokAuthButton.tsx

+type TikTokAuthButtonProps = Partial<SocialButtonProps> & {
+  onSuccess?: ({
+    profileData,
+    requiresReview
+  }: {
+    profileData: TikTokProfileData
+    requiresReview: boolean
+  }) => void
+  onError?: (e: unknown) => void
+  onClose?: () => void
+}


Added in callbacks to use instead of redux

DejayJD · 2023-12-22T23:17:44Z

packages/mobile/src/screens/sign-on-screen/components/SignUpFlowInstagramAuth.tsx

+  onClose?: () => void
+}
+
+const instagramAppId = Config.INSTAGRAM_APP_ID


Converted logic from saga to component + hooks

DejayJD · 2023-12-22T23:18:11Z

packages/mobile/src/screens/sign-on-screen/components/SignUpFlowTwitterAuth.tsx

+
+type CredentialsType = 'omit' | 'same-origin' | 'include'
+
+const useSetProfileFromTwitter = () => {


converted logic from saga to component/hooks

DejayJD · 2023-12-22T23:20:10Z

packages/mobile/src/screens/sign-on-screen/components/SignupFlowTikTokAuth.tsx

+}
+
+// Wrapper around TikTokAuthButton that
+export const SignUpFlowTikTokAuth = ({


I don't love this abstraction around the TikTokAuthButton but for the sake of backwards compatibility I didn't want to mess with the existing component and instead just added a wrapper (this is also how we have it on web rn)

agreed not in love with that pattern and i appreciate you working through the details here. maybe one day we can migrate away from this pattern, but good looks with a wrapper for now.

DejayJD · 2023-12-22T23:21:39Z

packages/mobile/src/screens/sign-on-screen/components/layout.tsx

 }

 export const ReadOnlyField = (props: ReadOnlyFieldProps) => {
  const { label, value } = props

  return (
-    <Box>
+    <Flex gap='xs'>


there's no gap in the figma but for some reason the text is way too squished together 🤔
Adding a gap here seems to fix it

DejayJD · 2023-12-22T23:22:38Z

packages/mobile/src/screens/sign-on-screen/components/useSocialMediaLoader.tsx

+import { useDispatch } from 'react-redux'
+import type { AnyAction } from 'redux'
+
+export const useSocialMediaLoader = ({


almost the same logic as web but a few diffs

DejayJD · 2023-12-22T23:23:40Z

packages/mobile/src/screens/sign-on-screen/screens/SignOnScreen.tsx

  const [email, setEmail] = useState('')
-  const [screen, setScreen] = useState<SignOnScreenType>('sign-up')
+  const [screen, setScreen] = useState<SignOnScreenType>(params.screen)


In order to link back to sign-in from the "Create Login Details" screen (which also has an email field), I had to add a param for the screen

smart idea, just double checking we want to link back from create-login-details?

audius-infra · 2023-12-22T23:30:51Z

Preview this change https://demo.audius.co/jd/social-media-signon

dylanjeffers

really impressive lift here. love all the improvements you made along the way.

dylanjeffers · 2023-12-27T03:47:59Z

packages/mobile/src/components/oauth/OAuth.tsx

+  onClose?: () => void
+}
+
+const OAuth = (props: OAuthProps) => {


do we want a better name for this component? like if its a modal, maybe OauthWebView like you import it as?

dylanjeffers · 2023-12-27T03:48:11Z

packages/mobile/src/components/oauth/OAuth.tsx

+  const isOpenStore = useSelector(getIsOpen)
+  const providerStore = useSelector(getAuthProvider)
+
+  const useProps = props.isOpen !== undefined


dylanjeffers · 2023-12-27T03:50:09Z

packages/mobile/src/screens/sign-on-screen/SignOnStack.tsx

      />
      <Stack.Screen name='CreatePassword' component={CreatePasswordScreen} />
      <Stack.Screen name='PickHandle' component={PickHandleScreen} />
      <Stack.Screen name='FinishProfile' component={FinishProfileScreen} />
      <Stack.Screen name='SelectGenre' component={SelectGenreScreen} />
      <Stack.Screen name='SelectArtists' component={SelectArtistsScreen} />
+      <Stack.Screen name='ReviewHandle' component={ReviewHandleScreen} />
+      <Stack.Screen


nice, im down to move review handle and create login details earlier in the render area, maybe after pick-handle? pure nit but a thought. we could also "group" them using Stack.Group, or just add comments, whatever you think.

dylanjeffers · 2023-12-27T03:52:32Z

packages/mobile/src/screens/sign-on-screen/components/SignUpFlowInstagramAuth.tsx

+    setIsModalOpen(false)
+    if (!('error' in payload)) {
+      const { code } = payload
+      if (code) {


wow this is all complex, good job thinking this all through.

dylanjeffers · 2023-12-27T03:54:18Z

packages/mobile/src/screens/sign-on-screen/components/SignUpFlowTwitterAuth.tsx

+const useSetProfileFromTwitter = () => {
+  const audiusQueryContext = useAudiusQueryContext()
+
+  return async ({


excellent job with this, not sure if worth callbacking these?

dylanjeffers · 2023-12-27T04:02:13Z

packages/mobile/src/screens/sign-on-screen/screens/CreateLoginDetailsScreen.tsx

+                    size='m'
+                    style={css({ textAlign: 'center' })}
+                  >
+                    {emailSchemaMessages.emailInUse}{' '}


oh interesting point that we might have a matching email at this point for log in... do we want that on this page you think?

My thinking is to keep the behavior consistent and help avoid people making dupe accounts 🤷.
I can see a scenario where someone forgot how they signed up with Audius, clicks one of the social sign ups, then comes here and types in their email and sees that they already signed up before. (Personally I've been guilty of this exact scenario before lol)
If you're feeling otherwise, happy to discuss

dylanjeffers · 2023-12-27T04:03:04Z

packages/mobile/src/screens/sign-on-screen/screens/PickHandleScreen.tsx

@@ -139,6 +163,9 @@ export const PickHandleScreen = () => {
              </Text>
            </Divider>
            <SocialMediaSection
+              onStart={handleStartSocialMediaLogin}


good stuff! everything is connected now :)

dylanjeffers · 2023-12-27T04:03:51Z

packages/mobile/src/screens/sign-on-screen/screens/ReviewHandleScreen.tsx

+  const navigation = useNavigation<SignUpScreenParamList>()
+  const isLinkingSocialOnFirstPage = useSelector(getLinkedSocialOnFirstPage)
+
+  const validationSchema = useMemo(() => {


small callout, we might want to useMemo the schema in create-login-details like this. ultimately prob doesnt matter much, but maybe for consistency?

dylanjeffers · 2023-12-27T04:05:09Z

packages/mobile/src/screens/sign-on-screen/screens/SignOnScreen.tsx

  const [email, setEmail] = useState('')
-  const [screen, setScreen] = useState<SignOnScreenType>('sign-up')
+  const [screen, setScreen] = useState<SignOnScreenType>(params.screen)


smart idea, just double checking we want to link back from create-login-details?

dylanjeffers · 2023-12-27T04:05:55Z

packages/web/src/pages/sign-up-page/components/SignupFlowTikTokAuth.tsx

@@ -59,7 +59,7 @@ export const SignupFlowTikTokAuth = ({
    <TikTokAuth
      onClick={() => {
        onStart()
-        dispatch(make(Name.CREATE_ACCOUNT_START_INSTAGRAM, {}))
+        dispatch(make(Name.CREATE_ACCOUNT_COMPLETE_TIKTOK, {}))


complete or start?

dylanjeffers · 2024-01-03T02:15:48Z

packages/mobile/src/screens/sign-on-screen/screens/CreateLoginDetailsScreen.tsx

+                  </Text>
+                </Hint>
+              ) : null}
+              <TextField


btw, im adding a password-field that we can migrate to

…jd/social-media-signon # Conflicts: # packages/harmony/src/assets/icons/ExclamationCircle.svg # packages/mobile/src/screens/sign-on-screen/screens/CreateEmailScreen.tsx

gitguardian · 2024-01-03T23:06:37Z

⚠️ GitGuardian has uncovered 6 secrets following the scan of your pull request.

Please consider investigating the findings and remediating the incidents. Failure to do so may lead to compromising the associated services or software components.

🔎 Detected hardcoded secrets in your pull request

GitGuardian id	Secret	Commit	Filename
688750	Generic High Entropy Secret	`e5a8a48`	packages/ddex/.env.dev	View secret
688750	Generic High Entropy Secret	`e5a8a48`	packages/ddex/.env.stage.local	View secret
2416684	Generic High Entropy Secret	`e5a8a48`	packages/ddex/.env.stage.local	View secret
2416685	Generic High Entropy Secret	`e5a8a48`	packages/ddex/.env.stage.local	View secret
2416686	Generic High Entropy Secret	`e5a8a48`	packages/ddex/.env.stage.local	View secret
3939057	Generic High Entropy Secret	`e5a8a48`	packages/ddex/.env.dev	View secret

🛠 Guidelines to remediate hardcoded secrets

Understand the implications of revoking this secret by investigating where it is used in your code.
Replace and store your secrets safely. Learn here the best practices.
Revoke and rotate these secrets.
If possible, rewrite git history. Rewriting git history is not a trivial act. You might completely break other contributing developers' workflow and you risk accidentally deleting legitimate data.

To avoid such incidents in the future consider

following these best practices for managing and storing secrets including API keys and other credentials
install secret detection on pre-commit to catch secret before it leaves your machine and ease remediation.

^{🦉 GitGuardian detects secrets in your source code to help developers and security teams secure the modern development process. You are seeing this because you or someone else with access to this repository has authorized GitGuardian to scan your pull request.

Our GitHub checks need improvements? Share your feedbacks!}

audius-infra · 2024-01-03T23:20:21Z

Preview this change https://demo.audius.co/jd/social-media-signon

[0f7a486] [C-3478] Backlink to album from track page (#7074) Andrew Mendelsohn [bc375b1] DDEX NODE_ENV production -> prod (#7103) Michelle Brier [ac831b6] Actually fix discovery notif tests (#7101) Raymond Jacobson [c9fd31e] Move uploads out of DDEX client (#7100) Michelle Brier [d162abc] [C-3571] Fix modal header styles (#7091) Dylan Jeffers [3e22ea8] [C-3515] Fix desktop sign up page transitions (#7084) Dylan Jeffers [dcd6c7d] Bump version to 0.6.12 audius-infra [dd4de97] [Web] Fix OAuth sig timestamp (#7099) nicoback2 [6aada56] Add default ddex stage keys and enforce prettier (#7098) Theo Ilie [80ec2c0] Fix copyright year for notif test (#7079) Isaac Solo [6e3fe0c] Increment mobile versions ahead of 1.5.59 (#7097) Raymond Jacobson [53722a8] Add ddex upload logic to backend (#7096) Michelle Brier [1149d51] Add 8cpu resource class to circleci runners (#7094) Danny [7dc3969] Make Stripe the default PurchaseVendor for AddFunds on mobile (#7085) Marcus Pasell [33e1b72] [C-3560 C-3564] Improve mobile playlist image generation perf. (#7080) Dylan Jeffers [9d82f82] Fix harmony build (#7093) Dylan Jeffers [e8bb46a] fix: Fix horizontal color logo clipping & resize img (#7082) JD Francis [c8fea06] Try again to bust cache (#7090) nicoback2 [9ad8bc5] Fix esbuild on intel (#7089) Dylan Jeffers [78460d7] Perform full disk cleanup hourly for self-hosted runners (#7088) Danny [90f3b13] Add DDEX MVC + DB scaffolding (#7086) Theo Ilie [a679e5b] Fix uptime optimizely env (#7083) Michelle Brier [62a618a] Bust turbo web cache (#7081) nicoback2 [643f1d6] [C-3524] Mobile sign-up QA (#7069) Dylan Jeffers [0cd9acf] [C-3462] Disable native font scaling (#7072) Dylan Jeffers [9ff4ac9] [C-3546] Upgrade electron (#7071) Dylan Jeffers [e44ec48] [PROTO-1557] Add DDEX NodeJS backend (#7064) Theo Ilie [3d25793] Bump version to 0.6.11 audius-infra [7840090] [Web] Enable connecting wallet to user via new OAuth `write_once` scope [C-3499] (#7045) nicoback2 [34934d7] [C-3425] Add Button component to native harmony (#7038) Kyle Shanks [a065073] Fix svgr template when no theme (#7076) Dylan Jeffers [c92b4c6] [Discovery API] Add transaction signature to OAuth JWT payload type (#7075) nicoback2 [f66e31c] Scheduled release UI fixes from QA (#7070) Isaac Solo [e3ead7f] Sanitize h1 (#7073) Raymond Jacobson [5bb8bb6] [C-3450] Native Social SignUp (#7000) JD Francis [26f3249] Add is_scheduled_release field (#7061) Isaac Solo [d715d6f] [PAY-2289] Fix premium/usdc modal close issues (#7060) Raymond Jacobson [c2e15dc] Fix native storybook (#7068) Dylan Jeffers [32333e9] [C-3553] Upgrade all react native deps to latest (#7048) Dylan Jeffers [954437d] Restrict DDEX logins (#7062) Michelle Brier [5acff7d] [EM] Allow dashboard wallet to sign EM CreateDashboardWalletUser tx and user to sign `user_signature` in the metadata C-3568 (#7067) nicoback2 [9102cbe] [PAY-2321] Prevent crash if nsure RN module isn't available (#7065) Randy Schott [1bb061a] [C-3490] Improve profile touch targets (#7053) Dylan Jeffers [d82052a] [C-3492] Fix podcast popup position (#7054) Dylan Jeffers [e430ee8] [C-3565] Reduce saga apk size (#7058) Dylan Jeffers [8d2d6df] Clamp upload percentage (#7049) Dylan Jeffers [89bf61d] Fix payment method existing balance (#7063) Saliou Diallo [6e69ecf] [PAY-2281] Fix mobile web purchase modal footer placement (#7059) Raymond Jacobson [733f140] Bump version to 0.6.10 audius-infra [7af8ba5] [C-3513] Private albums + show PublishButton for albums (#7055) Andrew Mendelsohn [5c034eb] [PAY-2320] Fix explore tx link callouts (#7057) Raymond Jacobson [f7e0852] [C-3566] UploadChip - fix text wrapping (#7056) Andrew Mendelsohn [7811bb7] Fix schedule release gating (#7051) Isaac Solo [eccbe31] Tag protocol dashboard `-dev` image (for audius-d) (#7052) endline [b68a4e4] Fix react-native-svg version (#7050) Dylan Jeffers [21ffecd] [PAY-2297] Add extra purchase metadata on mobile (#7010) Randy Schott [9815067] Fix button color darkening (#7047) Dylan Jeffers [1380e77] Bump version to 0.6.9 audius-infra [7928e12] Improve sdk track upload logs (#7007) Sebastian Klingler

DejayJD added 5 commits December 14, 2023 18:22

porting over web code

d45251f

progress on tiktok button

7b0dff0

common changes

d7daec8

working impl of the 3

ab07d79

fix track events + handle page

12e6edf

pull-request-size bot added the size/XXL label Dec 20, 2023

DejayJD added 4 commits December 20, 2023 16:23

Merge branch 'main' of github.com:AudiusProject/audius-protocol into …

ab89f30

…jd/social-media-signon # Conflicts: # packages/common/src/messages/sign-on/pages.ts # packages/common/src/schemas/index.ts # packages/mobile/src/screens/sign-on-screen/SignOnStack.tsx

Update login details screen to use harmony icon + route back to login

76db77a

fix lint

e68af95

undo ts change

2b48def

DejayJD requested a review from dylanjeffers December 20, 2023 22:32

fix minor bugs

ce15092

DejayJD added 2 commits December 22, 2023 16:55

redo oauth logic

ae79cb6

fix ts and lint

bd8edab

DejayJD commented Dec 22, 2023

View reviewed changes

DejayJD added 2 commits December 22, 2023 17:19

fix comment

bef4934

more comments

623c401

DejayJD commented Dec 22, 2023

View reviewed changes

dylanjeffers approved these changes Dec 27, 2023

View reviewed changes

dylanjeffers reviewed Jan 3, 2024

View reviewed changes

DejayJD added 3 commits January 3, 2024 14:24

Merge branch 'main' of github.com:AudiusProject/audius-protocol into …

e5a8a48

…jd/social-media-signon # Conflicts: # packages/harmony/src/assets/icons/ExclamationCircle.svg # packages/mobile/src/screens/sign-on-screen/screens/CreateEmailScreen.tsx

PR feedback

3c19324

ts fix

39e7116

DejayJD merged commit 5bb8bb6 into main Jan 3, 2024
16 of 19 checks passed

DejayJD deleted the jd/social-media-signon branch January 3, 2024 23:56

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[C-3450] Native Social SignUp #7000

[C-3450] Native Social SignUp #7000

DejayJD commented Dec 20, 2023 •

edited

Loading

vercel bot commented Dec 20, 2023 •

edited

Loading

audius-infra commented Dec 20, 2023

audius-infra commented Dec 20, 2023

DejayJD Dec 22, 2023

DejayJD Dec 22, 2023

DejayJD Dec 22, 2023

DejayJD Dec 22, 2023 •

edited

Loading

DejayJD Dec 22, 2023

DejayJD Dec 22, 2023 •

edited

Loading

dylanjeffers Dec 27, 2023

DejayJD Dec 22, 2023

DejayJD Dec 22, 2023

DejayJD Dec 22, 2023

dylanjeffers Dec 27, 2023

audius-infra commented Dec 22, 2023

dylanjeffers left a comment

dylanjeffers Dec 27, 2023

dylanjeffers Dec 27, 2023

dylanjeffers Dec 27, 2023

dylanjeffers Dec 27, 2023

dylanjeffers Dec 27, 2023

dylanjeffers Dec 27, 2023

DejayJD Jan 3, 2024

dylanjeffers Dec 27, 2023

dylanjeffers Dec 27, 2023

dylanjeffers Dec 27, 2023

dylanjeffers Dec 27, 2023

DejayJD Jan 3, 2024

dylanjeffers Jan 3, 2024

gitguardian bot commented Jan 3, 2024

audius-infra commented Jan 3, 2024


		type CredentialsType = 'omit' \| 'same-origin' \| 'include'

		const useSetProfileFromTwitter = () => {

[C-3450] Native Social SignUp #7000

[C-3450] Native Social SignUp #7000

Conversation

DejayJD commented Dec 20, 2023 • edited Loading

Description

How Has This Been Tested?

vercel bot commented Dec 20, 2023 • edited Loading

audius-infra commented Dec 20, 2023

audius-infra commented Dec 20, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DejayJD Dec 22, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DejayJD Dec 22, 2023 • 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

audius-infra commented Dec 22, 2023

dylanjeffers left a 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

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

Choose a reason for hiding this comment

gitguardian bot commented Jan 3, 2024

⚠️ GitGuardian has uncovered 6 secrets following the scan of your pull request.

audius-infra commented Jan 3, 2024

DejayJD commented Dec 20, 2023 •

edited

Loading

vercel bot commented Dec 20, 2023 •

edited

Loading

DejayJD Dec 22, 2023 •

edited

Loading

DejayJD Dec 22, 2023 •

edited

Loading