chore: Blog last used #2131
chore: Blog last used #2131
Conversation
adding the blog
perkinsjr
requested review from
chronark,
MichaelUnkey and
mcstepp
as code owners
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
2 Skipped Deployments
|
📝 Walkthrough📝 Walkthrough📝 WalkthroughWalkthroughThe changes introduce a tutorial focused on enhancing the authentication user experience (UX) for applications, particularly for returning users during the sign-in process. It covers account linking, allowing users to sign in with multiple providers while matching email addresses to existing accounts. A new "Last used" feature is proposed to remember the last sign-in method, along with code snippets for integrating this feature into the sign-in and sign-up flows. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant App
participant AuthProvider
User->>App: Initiates sign-in
App->>AuthProvider: Requests available sign-in methods
AuthProvider-->>App: Returns methods (e.g., GitHub, Google)
App->>User: Displays sign-in options
User->>App: Selects a sign-in method
App->>User: Remembers last used method
App->>AuthProvider: Authenticates user
AuthProvider-->>App: Returns authentication status
App->>User: Displays success or error message
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
Thank you for following the naming conventions for pull request titles! 🙏 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Outside diff range and nitpick comments (2)
apps/www/content/blog/improve-auth-experience.mdx (2)
56-56: Consider rephrasing for clarity.The phrase "As you can see from the example code above" can be wordy.
Consider rephrasing to something more concise, such as:
-As you can see from the example code above, we know what provider the end user is attempting to sign in with, so now we can store this and provide a UI update. +From this example code, we can determine the provider the user is attempting to sign in with, allowing us to store this information and update the UI accordingly.Tools
LanguageTool
[style] ~56-~56: This phrasing can be wordy, so consider using a more descriptive and concise alternative.
Context: ... as Error).message); } }; ``` As you can see from the example code above, we know what pr...(AS_YOU_CAN_SEE)
81-81: Consider using a more expressive alternative.The phrase "To do this" could be more specific.
Consider rephrasing to provide more context:
-Now, we have all the elements to show our end users what sign-in method they used previously. To do this, we can update our sign-in code to include the hook similar to setState +Now, we have all the elements to show our end users what sign-in method they used previously. To implement this feature, we can update our sign-in code to include the hook, similar to how we use setStateTools
LanguageTool
[style] ~81-~81: Consider a more expressive alternative.
Context: ...sign-in method they used previously. To do this, we can update our sign-in code to...(DO_ACHIEVE)
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (4)
apps/www/public/images/blog-images/auth-experience/discord.pngis excluded by!**/*.pngapps/www/public/images/blog-images/auth-experience/last-used.pngis excluded by!**/*.pngapps/www/public/images/blog-images/auth-experience/og-image.pngis excluded by!**/*.pngapps/www/public/images/blog-images/auth-experience/sign-in.pngis excluded by!**/*.png
Files selected for processing (1)
- apps/www/content/blog/improve-auth-experience.mdx (1 hunks)
Additional context used
LanguageTool
apps/www/content/blog/improve-auth-experience.mdx
[style] ~56-~56: This phrasing can be wordy, so consider using a more descriptive and concise alternative.
Context: ... as Error).message); } }; ``` As you can see from the example code above, we know what pr...(AS_YOU_CAN_SEE)
[style] ~81-~81: Consider a more expressive alternative.
Context: ...sign-in method they used previously. To do this, we can update our sign-in code to...(DO_ACHIEVE)
Additional comments not posted (1)
apps/www/content/blog/improve-auth-experience.mdx (1)
1-122: Great job on the blog post!This blog post effectively explains the concept of improving authentication UX by implementing a "Last used" feature. The content is well-structured, and the code snippets clearly demonstrate the implementation. The explanations are clear and easy to follow, making it valuable for developers looking to enhance their authentication flow.
A few minor suggestions have been made to improve clarity and fix typos, but overall, this is an excellent addition to the blog.
Tools
LanguageTool
[style] ~56-~56: This phrasing can be wordy, so consider using a more descriptive and concise alternative.
Context: ... as Error).message); } }; ``` As you can see from the example code above, we know what pr...(AS_YOU_CAN_SEE)
[style] ~81-~81: Consider a more expressive alternative.
Context: ...sign-in method they used previously. To do this, we can update our sign-in code to...(DO_ACHIEVE)
There was a problem hiding this comment.
Actionable comments posted: 1
Outside diff range and nitpick comments (2)
apps/www/content/blog/improve-auth-experience.mdx (2)
56-60: Consider adding more details about usehook-ts.While you mention using usehook-ts, it might be helpful to provide a brief explanation of why you chose this library over implementing custom hooks. This could give readers more context for their own decision-making.
Tools
LanguageTool
[style] ~56-~56: This phrasing can be wordy, so consider using a more descriptive and concise alternative.
Context: ... as Error).message); } }; ``` As you can see from the example code above, we know what pr...(AS_YOU_CAN_SEE)
56-56: Consider rephrasing for clarity.The phrase "As you can see from the example code above" can be wordy. Consider rephrasing for clarity and conciseness.
Suggestion:
- As you can see from the example code above, we know what provider the end user is attempting to sign in with, so now we can store this and provide a UI update. + From this example code, we can determine the provider the user is attempting to sign in with, allowing us to store this information and update the UI accordingly.Tools
LanguageTool
[style] ~56-~56: This phrasing can be wordy, so consider using a more descriptive and concise alternative.
Context: ... as Error).message); } }; ``` As you can see from the example code above, we know what pr...(AS_YOU_CAN_SEE)
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (1)
apps/www/public/images/blog-images/auth-experience/discord.pngis excluded by!**/*.png
Files selected for processing (1)
- apps/www/content/blog/improve-auth-experience.mdx (1 hunks)
Additional context used
LanguageTool
apps/www/content/blog/improve-auth-experience.mdx
[style] ~56-~56: This phrasing can be wordy, so consider using a more descriptive and concise alternative.
Context: ... as Error).message); } }; ``` As you can see from the example code above, we know what pr...(AS_YOU_CAN_SEE)
[style] ~81-~81: Consider a more expressive alternative.
Context: ...sign-in method they used previously. To do this, we can update our sign-in code to...(DO_ACHIEVE)
Additional comments not posted (10)
apps/www/content/blog/improve-auth-experience.mdx (10)
10-15: LGTM: Clear introduction to the problem.The introduction effectively sets the context for the authentication UX issue this blog post addresses. It clearly explains the problem returning users face when trying to remember which account they used to sign up.
16-25: LGTM: Clear explanation of account linking.This section effectively explains the concept of account linking, its benefits, and its limitations. The example provided helps readers understand how it works in practice. The previously reported issue of a repeated paragraph has been resolved.
26-35: LGTM: Clear introduction to the "Last used" feature.This section effectively introduces the concept of adding a "Last used" indicator to improve the user experience. The explanation is clear, and the image helps visualize the feature.
36-54: LGTM: Well-structured OAuth sign-in function.The
oauthSignInfunction is well-structured and handles errors appropriately. It uses async/await for better readability and includes proper error logging and user feedback.
64-71: LGTM: Clear implementation of useLastUsed hook.The
useLastUsedhook is well-implemented using theuseLocalStoragehook from usehook-ts. The type safety for the possible values is a good practice.
75-79: LGTM: Simple and clear LastUsed component.The
LastUsedcomponent is straightforward and serves its purpose well. The use of a span with appropriate styling is a good choice for this use case.
83-105: LGTM: Updated oauthSignIn function with LastUsed feature.The updated
oauthSignInfunction correctly implements the "Last used" feature by setting the last used provider in local storage. The error handling remains intact, which is good.
109-117: LGTM: Clear implementation of LastUsed in UI.The code snippet effectively demonstrates how to incorporate the "Last used" indicator in the UI. The conditional rendering based on the
lastUsedstate is a good practice.
118-122: LGTM: Strong conclusion.The conclusion effectively summarizes the key points of the blog post and reinforces the importance of improving authentication UX. It ties together the concepts of account linking and the "Last used" feature, emphasizing their benefits for both users and the application's success.
1-122: LGTM: Well-structured and informative blog post.The overall structure and flow of the blog post are excellent. It follows a logical progression from introducing the problem to explaining solutions and their implementation. The balance between explanatory text, code snippets, and images is well-maintained, making it easy for readers to understand and follow the concepts presented.
Tools
LanguageTool
[style] ~56-~56: This phrasing can be wordy, so consider using a more descriptive and concise alternative.
Context: ... as Error).message); } }; ``` As you can see from the example code above, we know what pr...(AS_YOU_CAN_SEE)
[style] ~81-~81: Consider a more expressive alternative.
Context: ...sign-in method they used previously. To do this, we can update our sign-in code to...(DO_ACHIEVE)
There was a problem hiding this comment.
Actionable comments posted: 0
Outside diff range and nitpick comments (3)
apps/www/content/blog/improve-auth-experience.mdx (3)
24-29: Improve grammar and readability.There are a few minor grammatical issues in this section that can be improved:
- Line 26: Consider adding a comma after "experience" in "To improve the experience further".
- Line 28: The word "futher" is misspelled. It should be "further".
Please apply the following corrections:
-To improve the experience futher we can add an indicator to the sign-in page to show the user the last method they used to access our application. +To improve the experience further, we can add an indicator to the sign-in page to show the user the last method they used to access our application.Tools
LanguageTool
[uncategorized] ~26-~26: The grammatical number of this noun doesn’t look right. Consider replacing it.
Context: ...ch is frustrating as a user. ## Adding indicator to improve the User Experience To impr...(AI_EN_LECTOR_REPLACEMENT_NOUN_NUMBER)
[uncategorized] ~28-~28: A comma might be missing here.
Context: ...ience To improve the experience futher we can add an indicator to the sign-in pag...(AI_EN_LECTOR_MISSING_PUNCTUATION_COMMA)
56-56: Consider rephrasing for clarity.The phrase "As you can see from the example code above" can be considered wordy. Consider rephrasing for better clarity and conciseness.
Suggestion:
-As you can see from the example code above, we know what provider the end user is attempting to sign in with, so now we can store this and provide a UI update. +From the example code, we can determine the provider the end user is attempting to sign in with, allowing us to store this information and update the UI accordingly.Tools
LanguageTool
[style] ~56-~56: This phrasing can be wordy, so consider using a more descriptive and concise alternative.
Context: ... as Error).message); } }; ``` As you can see from the example code above, we know what pr...(AS_YOU_CAN_SEE)
81-81: Consider rephrasing for clarity.The phrase "To do this" can be made more expressive. Consider rephrasing for better clarity.
Suggestion:
-Now, we have all the elements to show our end users what sign-in method they used previously. To do this, we can update our sign-in code to include the hook similar to setState +Now, we have all the elements to show our end users what sign-in method they used previously. To implement this feature, we can update our sign-in code to include the hook similar to setStateTools
LanguageTool
[style] ~81-~81: Consider a more expressive alternative.
Context: ...sign-in method they used previously. To do this, we can update our sign-in code to...(DO_ACHIEVE)
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (1)
- apps/www/content/blog/improve-auth-experience.mdx (1 hunks)
Additional context used
LanguageTool
apps/www/content/blog/improve-auth-experience.mdx
[uncategorized] ~26-~26: The grammatical number of this noun doesn’t look right. Consider replacing it.
Context: ...ch is frustrating as a user. ## Adding indicator to improve the User Experience To impr...(AI_EN_LECTOR_REPLACEMENT_NOUN_NUMBER)
[uncategorized] ~28-~28: A comma might be missing here.
Context: ...ience To improve the experience futher we can add an indicator to the sign-in pag...(AI_EN_LECTOR_MISSING_PUNCTUATION_COMMA)
[style] ~56-~56: This phrasing can be wordy, so consider using a more descriptive and concise alternative.
Context: ... as Error).message); } }; ``` As you can see from the example code above, we know what pr...(AS_YOU_CAN_SEE)
[style] ~81-~81: Consider a more expressive alternative.
Context: ...sign-in method they used previously. To do this, we can update our sign-in code to...(DO_ACHIEVE)
Additional comments not posted (2)
apps/www/content/blog/improve-auth-experience.mdx (2)
1-8: Fix typo in the blog post description.The description still contains a typo that needs to be corrected.
Please apply the following correction:
-description: Improving your authentication UX can allow for a smoother and more satisfying experience for returning users +description: Improving your authentication UX can allow for a smoother and more satisfying experience for returning users
1-122: LGTM! Approve with minor suggestions.The blog post effectively explains the concept of improving authentication UX with clear explanations and relevant code examples. The content is informative and well-structured. I've suggested a few minor grammatical and stylistic improvements, but these don't significantly impact the overall quality of the post.
Great job on creating this informative tutorial on enhancing the authentication experience!
Tools
LanguageTool
[uncategorized] ~26-~26: The grammatical number of this noun doesn’t look right. Consider replacing it.
Context: ...ch is frustrating as a user. ## Adding indicator to improve the User Experience To impr...(AI_EN_LECTOR_REPLACEMENT_NOUN_NUMBER)
[uncategorized] ~28-~28: A comma might be missing here.
Context: ...ience To improve the experience futher we can add an indicator to the sign-in pag...(AI_EN_LECTOR_MISSING_PUNCTUATION_COMMA)
[style] ~56-~56: This phrasing can be wordy, so consider using a more descriptive and concise alternative.
Context: ... as Error).message); } }; ``` As you can see from the example code above, we know what pr...(AS_YOU_CAN_SEE)
[style] ~81-~81: Consider a more expressive alternative.
Context: ...sign-in method they used previously. To do this, we can update our sign-in code to...(DO_ACHIEVE)
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
- apps/www/content/blog/improve-auth-experience.mdx (1 hunks)
🧰 Additional context used
🪛 LanguageTool
apps/www/content/blog/improve-auth-experience.mdx
[uncategorized] ~28-~28: Possible missing comma found.
Context: ...r Experience To improve the experience futher we can add an indicator to the sign-in ...(AI_HYDRA_LEO_MISSING_COMMA)
[style] ~56-~56: This phrasing can be wordy, so consider using a more descriptive and concise alternative.
Context: ... as Error).message); } }; ``` As you can see from the example code above, we know what pr...(AS_YOU_CAN_SEE)
[style] ~81-~81: Consider a more expressive alternative.
Context: ...sign-in method they used previously. To do this, we can update our sign-in code to...(DO_ACHIEVE)
🔇 Additional comments (9)
apps/www/content/blog/improve-auth-experience.mdx (9)
1-8: LGTM! The metadata looks good.The metadata for the blog post is well-structured and informative. The typo in the description that was mentioned in a past review comment has been fixed.
10-15: The introduction effectively sets the context.The introduction clearly presents the problem of user confusion during the sign-in process and introduces the concept of account linking as a potential solution. It's concise and engaging.
26-35: The introduction to the "Last used" feature is clear and well-illustrated.The explanation of the "Last used" feature and its benefits is concise and easy to understand. The image effectively illustrates the concept.
🧰 Tools
🪛 LanguageTool
[uncategorized] ~28-~28: Possible missing comma found.
Context: ...r Experience To improve the experience futher we can add an indicator to the sign-in ...(AI_HYDRA_LEO_MISSING_COMMA)
56-60: Good explanation of the hook implementation.The explanation of using
usehook-tsfor local storage management is clear and concise. The npm installation command is helpful for readers who want to implement this feature.🧰 Tools
🪛 LanguageTool
[style] ~56-~56: This phrasing can be wordy, so consider using a more descriptive and concise alternative.
Context: ... as Error).message); } }; ``` As you can see from the example code above, we know what pr...(AS_YOU_CAN_SEE)
62-71: TheuseLastUsedhook implementation looks good.The
useLastUsedhook is well-implemented and typed correctly. It provides a clean interface for managing the last used sign-in method in local storage.
73-79: TheLastUsedcomponent is simple and effective.The
LastUsedcomponent is a straightforward implementation of the "Last used" indicator. It's flexible enough to be easily customized if needed.
118-122: The conclusion effectively summarizes the key points.The conclusion nicely wraps up the blog post by reiterating the importance of improving authentication UX. It effectively ties together the concepts of account linking and the "Last used" feature, emphasizing their benefits for both users and the application.
1-122: Overall, this is an excellent and informative blog post.The blog post effectively addresses the important topic of improving authentication UX. It provides a clear explanation of the problem, introduces solutions like account linking and the "Last used" feature, and includes relevant code snippets to guide implementation.
The structure is logical, moving from problem statement to solution, and then to implementation details. The code snippets are well-explained and integrated into the narrative.
A few minor suggestions have been made in previous comments, but these are relatively small improvements to an already strong piece of content.
Great job on creating a valuable resource for developers looking to enhance their application's authentication experience!
🧰 Tools
🪛 LanguageTool
[uncategorized] ~28-~28: Possible missing comma found.
Context: ...r Experience To improve the experience futher we can add an indicator to the sign-in ...(AI_HYDRA_LEO_MISSING_COMMA)
[style] ~56-~56: This phrasing can be wordy, so consider using a more descriptive and concise alternative.
Context: ... as Error).message); } }; ``` As you can see from the example code above, we know what pr...(AS_YOU_CAN_SEE)
[style] ~81-~81: Consider a more expressive alternative.
Context: ...sign-in method they used previously. To do this, we can update our sign-in code to...(DO_ACHIEVE)
16-25:⚠️ Potential issueThe account linking explanation is clear, but there's a minor issue.
The explanation of account linking is concise and easy to understand. However, there's a small typo in line 28.
Please apply the following correction:
-To improve the experience futher we can add an indicator to the sign-in page to show the user the last method they used to access our application. +To improve the experience further, we can add an indicator to the sign-in page to show the user the last method they used to access our application.Also, the repeated paragraph mentioned in a past review comment has been removed, addressing that issue.
Likely invalid or redundant comment.
perkinsjr
force-pushed
the
blog-last-used
branch
from
dd26cf1 to
2238c78
Compare
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (4)
apps/www/public/images/blog-images/auth-experience/discord.pngis excluded by!**/*.pngapps/www/public/images/blog-images/auth-experience/last-used.pngis excluded by!**/*.pngapps/www/public/images/blog-images/auth-experience/og-image.pngis excluded by!**/*.pngapps/www/public/images/blog-images/auth-experience/sign-in.pngis excluded by!**/*.png
📒 Files selected for processing (1)
- apps/www/content/blog/improve-auth-experience.mdx (1 hunks)
🧰 Additional context used
🪛 LanguageTool
apps/www/content/blog/improve-auth-experience.mdx
[style] ~56-~56: This phrasing can be wordy, so consider using a more descriptive and concise alternative.
Context: ... as Error).message); } }; ``` As you can see from the example code above, we know what pr...(AS_YOU_CAN_SEE)
[style] ~81-~81: Consider a more expressive alternative.
Context: ...sign-in method they used previously. To do this, we can update our sign-in code to...(DO_ACHIEVE)
🔇 Additional comments (3)
apps/www/content/blog/improve-auth-experience.mdx (3)
10-29: LGTM: Clear introduction and explanation of account linking.The introduction effectively explains the problem of returning users not remembering their sign-in method, and the explanation of account linking is clear and concise. The previously reported issue of a repeated paragraph has been resolved.
118-122: LGTM: Effective conclusion summarizing the benefits.The conclusion effectively summarizes the key points and benefits of improving authentication UX. It reinforces the importance of the proposed improvements for both end-users and the application's success.
5-5:⚠️ Potential issueFix typo in the blog post description.
There's still a typo in the description that needs to be corrected.
Please apply the following correction:
-description: Improving your authentication UX can allow for a smoother and more satisfying for returning user +description: Improving your authentication UX can allow for a smoother and more satisfying experience for returning usersLikely invalid or redundant comment.
Adds a new blog post about improving ux of auth through last used.
Summary by CodeRabbit