Add Login component with Google authentication support #7107
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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 (
|
github-actions
bot
added
Playground
|
Warning This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. This stack of pull requests is managed by Graphite. Learn more about stacking. |
jnsdls
force-pushed
the
Add_login_functionality_with_multiple_authentication_methods
branch
from
f72823c to
791d39b
Compare
jnsdls
force-pushed
the
Add_Login_component_with_Google_authentication_support
branch
from
b65c507 to
a4c2c81
Compare
![graphite-app[bot]](https://avatars.githubusercontent.com/in/158384?s=60&v=4){kind=small}
| export const metadata: Metadata = { | ||
| metadataBase, | ||
| title: "Login | thirdweb Connect", | ||
| description: "TODO", |
There was a problem hiding this comment.
The metadata description is currently set as "TODO". This placeholder should be replaced with a meaningful description that accurately represents the Login page functionality. A good description will improve SEO and provide users with context about the page's purpose when shared on social media or in search results.
| description: "TODO", | |
| description: "Sign in to access your Playground account and explore our interactive development environment. Secure login to all Playground features and services.", |
Spotted by Diamond
Is this helpful? React 👍 or 👎 to let us know.
| <div className="flex flex-col gap-14"> | ||
| <CodeExample | ||
| lang="ts" | ||
| code={"TODO"} |
There was a problem hiding this comment.
The code prop is currently set to "TODO", which needs to be replaced with actual code that demonstrates the Login component implementation. Consider adding a code snippet that shows how to use the Google authentication flow, matching what's being demonstrated in the BasicLoginExample component. This would provide users with a complete example they can reference.
| code={"TODO"} | |
| code={`import { useCallback } from 'react'; | |
| import { useGoogleLogin } from '@react-oauth/google'; | |
| import { Button } from '@your-ui-library/components'; | |
| export function LoginWithGoogle() { | |
| const login = useGoogleLogin({ | |
| onSuccess: (tokenResponse) => { | |
| console.log('Login successful:', tokenResponse); | |
| // Handle successful login, e.g., store tokens, redirect user | |
| }, | |
| onError: (error) => { | |
| console.error('Login failed:', error); | |
| // Handle login failure | |
| }, | |
| flow: 'implicit', | |
| }); | |
| const handleLogin = useCallback(() => { | |
| login(); | |
| }, [login]); | |
| return ( | |
| <Button onClick={handleLogin} variant="primary"> | |
| Sign in with Google | |
| </Button> | |
| ); | |
| }`} |
Spotted by Diamond
Is this helpful? React 👍 or 👎 to let us know.
jnsdls
force-pushed
the
Add_login_functionality_with_multiple_authentication_methods
branch
from
791d39b to
49c465c
Compare
jnsdls
force-pushed
the
Add_Login_component_with_Google_authentication_support
branch
from
a4c2c81 to
8f6c656
Compare
size-limit report 📦
|
jnsdls
force-pushed
the
Add_login_functionality_with_multiple_authentication_methods
branch
from
49c465c to
3e96dad
Compare
jnsdls
force-pushed
the
Add_Login_component_with_Google_authentication_support
branch
from
8f6c656 to
1da4b1d
Compare
jnsdls
force-pushed
the
Add_login_functionality_with_multiple_authentication_methods
branch
from
3e96dad to
0cba3cb
Compare
jnsdls
force-pushed
the
Add_Login_component_with_Google_authentication_support
branch
from
1da4b1d to
9978187
Compare
jnsdls
force-pushed
the
Add_Login_component_with_Google_authentication_support
branch
from
9978187 to
53547ce
Compare
Codecov ReportAttention: Patch coverage is
❌ Your patch check has failed because the patch coverage (28.57%) is below the target coverage (80.00%). You can increase the patch coverage or adjust the target coverage. Additional details and impacted files@@ Coverage Diff @@
## Add_login_functionality_with_multiple_authentication_methods #7107 +/- ##
================================================================================================
- Coverage 55.27% 55.27% -0.01%
================================================================================================
Files 909 909
Lines 58510 58514 +4
Branches 4069 4067 -2
================================================================================================
Hits 32342 32342
- Misses 26063 26067 +4
Partials 105 105
🚀 New features to boost your workflow:
|
jnsdls
force-pushed
the
Add_Login_component_with_Google_authentication_support
branch
from
53547ce to
ce41752
Compare
jnsdls
force-pushed
the
Add_login_functionality_with_multiple_authentication_methods
branch
from
0cba3cb to
c8a9d02
Compare
jnsdls
force-pushed
the
Add_Login_component_with_Google_authentication_support
branch
from
ce41752 to
6b261b4
Compare
TL;DR
Added Login functionality to the playground web app using thirdweb's authentication system.
What changed?
/connect/loginwith a basic example component/connect/login/api/[...all]How to test?
/connect/loginin the playground web appWhy make this change?
This change provides a complete authentication solution for the playground web app, allowing users to login using various authentication providers. It demonstrates the thirdweb Login functionality in a practical example that developers can reference. The server wallet extraction also improves code organization by centralizing wallet configuration for reuse across different parts of the application.
PR-Codex overview
This PR enhances the login functionality and structure in the
thirdwebandplayground-webprojects. It introduces new exports, modifies the login process, and refines the handling of server wallets, while also updating TypeScript configurations.Detailed summary
getDomaininapps/playground-web/src/lib/constants.ts.loginfunction inpackages/thirdweb/src/login/client/login.tsto includechainin login options.SERVER_WALLETinapps/playground-web/src/lib/server-wallet.ts.apps/playground-web/src/app/connect/login/api/[...all]/route.ts.BasicLoginExamplecomponent inapps/playground-web/src/components/login/basic-example.tsx.apps/playground-web/src/app/connect/login/page.tsx.packages/thirdweb/package.json.