I’m utilizing the modal SDK, with my users exclusively logging in through Google. On mobile devices, I encountered an issue: when using uxMode: 'popup' , the pop-ups were blocked. Consequently, I switched to uxMode: 'redirect' . However, since making this change, it appears that some authentication and user data are lost upon redirecting back to my app, resulting in users being blocked by subsequent middleware.
version : “@web3auth/modal”: “^7.3.2”
app: nextJS 14
@dapp Welcome Aboard!
Sorry to hear you are facing issues.
Is this in Production or Test environment?
both on prod and dev
Please share your GitHub repo and Dapp URL to check
sorry i cant share my repo as its private, will some code screenshots help?
Please share the code snippets and relevant error messages.
hey, I updated my issue, I am now facing a different issue. I don’t get error messages in the console, but it’s clear that the auth data is getting lost.
You need to share some information for us to check. Is this happening on Safari browser or which browser? Share the package.json file and the code snippets to able to assist.
its happening on all browsers when redirect is specified.
package.json:
{
"name": "dapp",
"version": "0.1.0",
"private": true,
"scripts": {
"de2v": "yarn postinstall && next dev",
"devprod": "APP_ENV=production op run --env-file='./.local.env' -- yarn de2v",
"dev": "APP_ENV=development op run --env-file='./.local.env' -- yarn de2v",
"devaws": "sst bind next dev",
"build": "yarn postinstall && next build",
"test": "jest",
"start": "next start",
"lint": "next lint --fix",
"prepare": "husky install",
"pretest": "./node_modules/.bin/eslint \"**/*.tsx\" --fix",
"stylelint": "stylelint \"**/*.{css,scss,sass}\" --fix",
"postinstall": "npx typechain --target=ethers-v5 './abis/**.json' --out-dir='./types/ethers-contracts'",
"sstdevdeploy": "APP_ENV=development op run --env-file='.local.env' -- npx sst deploy --stage dev",
"sstproddeploy": "APP_ENV=production op run --env-file='.local.env' -- npx sst deploy --stage prod"
},
"dependencies": {
"@biconomy/account": "3.1.0",
"@biconomy/bundler": "3.1.0",
"@biconomy/common": "3.1.0",
"@biconomy/core-types": "3.1.0",
"@biconomy/paymaster": "3.1.0",
"@biconomy/web3-auth": "3.1.0",
"@emotion/cache": "^11.11.0",
"@emotion/react": "^11.11.3",
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.14.15",
"@mui/material": "^5.14.15",
"@mui/material-nextjs": "^5.15.5",
"@next/bundle-analyzer": "^14.0.4",
"@solana/web3.js": "^1.73.2",
"@toruslabs/eccrypto": "^4.0.0",
"@toruslabs/openlogin": "^7.0.3",
"@walletconnect/sign-client": "^2.11.1",
"@web3auth/base": "^7.3.2",
"@web3auth/base-provider": "^7.3.2",
"@web3auth/ethereum-provider": "^7.3.2",
"@web3auth/modal": "^7.3.2",
"@web3auth/no-modal": "^7.3.2",
"@web3auth/openlogin-adapter": "^7.3.2",
"@web3auth/solana-provider": "^7.3.2",
"aws-cdk-lib": "2.101.1",
"constructs": "10.2.69",
"cookie": "^0.5.0",
"next": "^14.0.4",
"next-seo": "^6.4.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-lazily": "^0.9.2",
"react-loading-skeleton": "^3.3.1",
"react-router-dom": "^6.21.2",
"react-toastify": "^10.0.3",
"sanitize-html": "^2.11.0",
"sst": "^2.34.7",
"web3": "^1.8.1"
},
"devDependencies": {
"@babel/core": "^7.17.5",
"@babel/plugin-proposal-class-properties": "^7.18.6",
"@babel/plugin-transform-private-methods": "^7.22.5",
"@next/eslint-plugin-next": "^14.0.4",
"@testing-library/dom": "^8.16.0",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.0.0",
"@testing-library/react-hooks": "^8.0.1",
"@testing-library/user-event": "^14.1.1",
"@types/bignumber.js": "^5.0.0",
"@types/cookie": "^0.5.1",
"@types/fs-extra": "^9.0.13",
"@types/jest-axe": "^3.5.4",
"@types/node": "18.11.11",
"@types/pngjs": "^6.0.1",
"@types/react": "^18.2.48",
"@types/sanitize-html": "^2.9.3",
"@typescript-eslint/eslint-plugin": "^5.12.1",
"@typescript-eslint/parser": "^5.12.1",
"babel-jest": "^29.0.0",
"babel-loader": "^9.0.0",
"commitlint": "^17.0.3",
"conventional-changelog-conventionalcommits": "^5.0.0",
"eslint": "^8.9.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-config-next": "13.4.8",
"eslint-config-prettier": "^8.4.0",
"eslint-plugin-import": "^2.25.4",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-react": "^7.28.0",
"eslint-plugin-react-hooks": "^4.3.0",
"eslint-plugin-testing-library": "^5.6.0",
"ethers": "^5.7.2",
"husky": "8.0.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^29.0.0",
"jest-axe": "^7.0.0",
"jest-environment-jsdom": "^29.3.1",
"jose": "^4.11.1",
"pngjs": "^6.0.0",
"prettier": "^2.5.1",
"pretty-quick": "^3.1.3",
"react-test-renderer": "^18.0.0",
"stylelint": "^14.5.3",
"stylelint-config-standard": "^29.0.0",
"ts-jest": "^29.0.0",
"ts-node": "^10.6.0",
"typechain": "^8.3.1",
"typescript": "^5.1.6"
},
"packageManager": "yarn@3.4.1"
}
Hi @dapp ,
I just tried the example with your configuration and it works ok.
I suggest some tests:
- Check the ENV file has the proper configuration.
- If necessary, you can share the project with us privately and we will analyze it.
- You could delete node_modules and “npm install” again
Please, for faster help, next time share the code in text format.
We look forward to your contact
thank you for the response!
I managed to fix it by updating the middleware mechanism in my dApp, to work for ‘redirect’.
1 Like
This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.