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.

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

fix: add Name field to SetUsernameView #6144

Merged
merged 3 commits into from
Feb 20, 2025

Conversation

jjinendra3
Copy link
Contributor

Proposed changes

Asks the name from the user during signup using Social Auth so to not leave the name slot empty.

Issue(s)

#6138

How to test or reproduce

  1. Use a new email address not used in Rocket Chat.
  2. Sign up using Social Auth.
  3. There is no field to ask for the name of the user and as a result

Screenshots

Types of changes

  • Bugfix (non-breaking change which fixes an issue)
  • Improvement (non-breaking change which improves a current function)
  • New feature (non-breaking change which adds functionality)
  • Documentation update (if none of the other choices apply)

Checklist

  • I have read the CONTRIBUTING doc
  • I have signed the CLA
  • Lint and unit tests pass locally with my changes
  • I have added tests that prove my fix is effective or that my feature works (if applicable)
  • I have added necessary documentation (if applicable)
  • Any dependent changes have been merged and published in downstream modules

Further comments

I thoroughly debugged the SocialOAuth flow, checking all params in sdk.ts and all auth related functions such as login() [connect.ts], loginTOTP() [connect.ts], also tracing requests and their responses from and to @rocket.chat/sdk, and verifying backend auth routes. I found that in the result.me section (screenshot), key values like name and username are coming as undefined, seemingly from the @rocket.chat/sdk.

To cross-check, I tried calling users.wholeInfo with users.getUsernameSuggestion to check the user details there, but since the backend doesn’t store name from Social OAuth, it doesn’t return anything substantial.

I also analyzed how the web client handles this and found that it doesn’t rely on the SDK but has a different embedded indigenous auth system.

After 15+ test signups and deletions in the React Native app analyzing each through different methods, I couldn’t automate fetching the name.

So, as a fix, I propose adding a controlled text input below the username field in app/views/SetUsernameView.tsx, allowing users to enter their name manually. This can be further improved by introducing a users.getNameSuggestion route, similar to getUsernameSuggestion, both of which can be called in the existing useEffect to enhance UX while keeping flexibility for users to modify their name.

Let me know if I’ve missed something or if there’s a better approach. Thanks!

@diegolmello
Copy link
Member

I think this change might not cover the ideal scenario, so please test it.

IIRC SetUsernameView is only going be called when the backend was not able to use the username informed during register.
OAuth register > (username already exists) > SetUsernameView

Since the goal of this task is to fill Name correctly, this PR is aiming to fix the edge case, not the main flow.

@jjinendra3 Can you test and confirm this? It's been a long time since this flow was written in this app. Thanks!

@jjinendra3
Copy link
Contributor Author

Hey @diegolmello,

I tested this in two ways:

  1. Conventional Registration – If a username is already taken, an alert notifies the user, and the flow never reaches the SetUsernameView screen. This confirms that the conventional registration process is working as expected. (Screen recording)

  2. OAuth Signup – The user selects an OAuth provider and completes authentication in the browser. Upon returning to the app, they proceed through two-factor authentication. After successful 2FA, the user is always redirected to the SetUsernameView screen because no name or username is retrieved or sent to the backend. The getUsernameSuggestion used in mounting of SetUsernameView is a backend function that generates a username based on the email prefix (e.g., <name>@gmail.com).

(Entire Flow Test When Signing up using OAuth)

Conclusion:

  • Conventional registration is functioning correctly, handling duplicate usernames as expected through alerts.
  • OAuth signup, however, never retrieves the username from the provider, causing users to always land on the SetUsernameView screen. This confirms that the issue affects the main OAuth flow, aligning with the goal of this PR.

Thanks for your patience and guidance—it means a lot!

@diegolmello diegolmello changed the title fix: Social Auth Signup Name fix: add Name field to SetUsernameView Feb 20, 2025
@diegolmello diegolmello merged commit 4c48ae7 into RocketChat:develop Feb 20, 2025
3 of 8 checks passed
@diegolmello
Copy link
Member

@jjinendra3 Merged. Thanks for your contribution!

@pierre-lehnen-rc
Copy link

The name is loaded properly when logging in with google on the web client, but not on mobile. I compared the code of both and noticed that the web client requests both email and profile scopes when running the oauth login, but the mobile app only requests email, so that's probably why the user's name is nowhere to be seen.

I would try changing the scope here to email,profile to see if maybe that is enough to load the name directly from google.

@diegolmello
Copy link
Member

@jjinendra3 can you try that? 🔝

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants