Lensauth #215
Lensauth #215
Conversation
It is yeah, but it works and should not matter. Just force install the libraries. The dependency issue is with some web3 libraries that are not currently used. |
src/App.tsx
Outdated
| @@ -52,13 +64,21 @@ export default function App() { | |||
|
|
|||
| `; | |||
|
|
|||
| const queryClient = new QueryClient(); | |||
| const wagmiConfig = createConfig({ chains: [polygonAmoy], connectors: [ | |||
There was a problem hiding this comment.
Would it be worth adding an environment variable to determine which chain to use?
e.g., process.env.NODE_ENV === 'development' ? polygonAmoy : ...
| metaMask(), | ||
| safe(), | ||
| ], transports: { [polygonAmoy.id]: http(), },}); | ||
| const lensConfig: LensConfig = { environment: development, bindings: bindings(wagmiConfig),}; | ||
|
|
||
| console.info(`%c${charAt}`, 'color: #4A34B8'); |
There was a problem hiding this comment.
We can eventually use a Babel utility like 'transform-remove-console' to remove logs and keep them for debugging purposes. In the meantime, can we try to keep the logs with only useful information?
src/App.tsx
Outdated
| @@ -69,15 +89,29 @@ export default function App() { | |||
| themeStretch: false, | |||
| }} | |||
| > | |||
| <WagmiProvider config={wagmiConfig}> | |||
| <QueryClientProvider client={queryClient}> | |||
src/sections/login/LoginOptions.tsx
Outdated
| handle: username, to: wallet,}); | ||
| console.log(result) | ||
| if (!isRelaySuccess(result)) { console.error(`Something went wrong`, result); } | ||
| window.location.reload(); |
There was a problem hiding this comment.
just wondering if we should have a component to display the issue here?
| @@ -33,3 +33,4 @@ export const MAPBOX_API = process.env.REACT_APP_MAPBOX_API; | |||
|
|
|||
| // ROOT PATH AFTER LOGIN SUCCESSFUL | |||
| export const PATH_AFTER_LOGIN = paths.dashboard.root; // as '/dashboard' | |||
| export const PATH_BEFORE_LOGIN = '/login'; // as '/dashboard' | |||
There was a problem hiding this comment.
paths is a hub for paths? it worth to keep all the routes in there?
There was a problem hiding this comment.
Hi @XxSNiPxX,
Thank you for the Lens Auth integration you've done. I’ve left some comments in the code with a few ideas and suggestions to improve the implementation.
One suggestion is regarding the login routes. What do you think about allowing users to log in from any part of the app, without blocking them from viewing catalogs and movie information? Instead, we could prompt them to log in only when they try to interact with certain functionalities. I left a comment in the context about this, as it would require us to eliminate the login routes and handle everything in the context. We could then create a new task to integrate a login modal.
Additionally, it would be great to address some ESLint warnings that are appearing, which I believe are caused by unused imports.
Thanks again for your hard work. I'm excited to move forward with these tweaks and improvements.
| import React, { createContext, useContext, useState, useCallback, useEffect, useMemo } from 'react'; | ||
| import { useNavigate } from 'react-router-dom'; | ||
| import { SessionType, useSession } from '@lens-protocol/react-web'; | ||
|
|
There was a problem hiding this comment.
I was wondering if we could handle everything related to login, logout, etc., through the sessionContext you expose here. This approach might allow users to explore the application and prompt them to log in only when they try to interact with certain functionalities, possibly through a modal.
I'm planning to take care of the design tasks related to the login dynamics to help us move forward on this issue and have better clarity on how it should work. What do you think?
src/App.tsx
Outdated
| @@ -39,6 +39,18 @@ import MotionLazy from 'src/components/animate/motion-lazy'; | |||
| import SnackbarProvider from 'src/components/snackbar/snackbar-provider'; | |||
| import { SettingsProvider, SettingsDrawer } from 'src/components/settings'; | |||
|
|
|||
|
|
|||
There was a problem hiding this comment.
I was thinking that we could group imports by context to improve code clarity. For example, we could separate imports from external libraries from local ones.
| @@ -0,0 +1 @@ | |||
| legacy-peer-deps=true | |||
There was a problem hiding this comment.
I've added a .npmrc file so that it can be installed normally with npm i. However, this is just a temporary fix. Eventually, we should find a more permanent solution to resolve the dependency conflict.
# Conflicts: # package-lock.json # package.json # yarn.lock
|
Added Lens Protocol Login and Register for their Test net.
Added Protected routes for the dashboard.
Error Code ERESOLVE: There's a dependency conflict between [email protected] and the installed [email protected]. react-scripts requires a TypeScript version compatible with ^3.2.1 || ^4, but [email protected] exceeds this range.
Solutions include downgrading TypeScript, using --legacy-peer-deps or --force during installation, or updating dependencies for compatibility.