xenial-black•2y ago

is it possible to use AuthPage with username instead of email?

Hi, i want to use username instead of email on using the AuthPage. However, the input validation for the email keeps insist on using email as input.

12 Replies

compatible-crimson•2y ago

Hi @codecrazy, unfortunately <Form.Item> 's are not customazible right now. You can swizzle <AuthPage> and you can change email from <FormItem> https://refine.dev/docs/packages/documentation/cli/#swizzle

xenial-black•2y ago

i am getting No refine packages found with swizzle configuration.

compatible-crimson•2y ago

can u paste whoami output ? i will try to reproduce and debug

xenial-black•2y ago

System: - OS: Linux 5.15 Zorin OS 16.1 - CPU: (8) x64 Intel(R) Core(TM) i7-9700F CPU @ 3.00GHz Binaries: - Node: 16.16.0 - /tmp/yarn--1671452042031-0.13330150985142453/node - Yarn: 1.22.19 - /tmp/yarn--1671452042031-0.13330150985142453/yarn - npm: 8.11.0 - ~/.nvm/versions/node/v16.16.0/bin/npm Browsers: - Chrome: Not Found - Firefox: 104.0 Refine Packages: Done in 8.28s.

compatible-crimson•2y ago

it shows no installed refine packages. this is why it says no installed refine packages. it's a long shot but can you remove node_modules and install again ? in the meantime i will investigate the problem

xenial-black•2y ago

alright i just deleted node_modules and installed again same output i am not sure but i am using nx for managing the monorepo it might or not might be related the following are the current deps:

"dependencies": {
    "@pankod/refine-chakra-ui": "1.6.2",
    "@pankod/refine-cli": "^1.13.2",
    "@pankod/refine-core": "3.90.6",
    "@pankod/refine-inferencer": "^1.2.0",
    "@pankod/refine-nextjs-router": "^4.1.0",
    "@pankod/refine-react-hook-form": "^3.27.1",
    "@pankod/refine-react-table": "^4.7.2",
    "@pankod/refine-simple-rest": "^3.18.0",
    "@tabler/icons": "^1.39.1",
    "@tanstack/react-table": "^8.7.3",
    "@xstate/react": "^3.0.1",
    "await-to-js": "^3.0.0",
    "eslint": "^8.29.0",
    "eslint-plugin-react": "^7.31.11",
    "formik": "^2.2.9",
    "next": "^13.0.6",
    "next-compose-plugins": "^2.2.1",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.7.1",
    "react-toastify": "^9.1.1",
    "xstate": "^4.35.0"
  }

"dependencies": {
    "@pankod/refine-chakra-ui": "1.6.2",
    "@pankod/refine-cli": "^1.13.2",
    "@pankod/refine-core": "3.90.6",
    "@pankod/refine-inferencer": "^1.2.0",
    "@pankod/refine-nextjs-router": "^4.1.0",
    "@pankod/refine-react-hook-form": "^3.27.1",
    "@pankod/refine-react-table": "^4.7.2",
    "@pankod/refine-simple-rest": "^3.18.0",
    "@tabler/icons": "^1.39.1",
    "@tanstack/react-table": "^8.7.3",
    "@xstate/react": "^3.0.1",
    "await-to-js": "^3.0.0",
    "eslint": "^8.29.0",
    "eslint-plugin-react": "^7.31.11",
    "formik": "^2.2.9",
    "next": "^13.0.6",
    "next-compose-plugins": "^2.2.1",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.7.1",
    "react-toastify": "^9.1.1",
    "xstate": "^4.35.0"
  }

compatible-crimson•2y ago

thank you for clear explanation. we are investigating with the team 🙏

Omer•2y ago

Could you try again with npx? Are you running it in the folder where the refine project is located? npx @pankod/refine-cli@latest swizzle

quickest-silver•2y ago

Not sure if this have something to do with the current working directory when running the swizzle command but I think it's worth to check 🤔
We're also running tests on our refine monorepo which we use Lerna + nx and didn't had such issues since we also end up with node_modules inside the bootstrapped example with symlinked modules. We'll try to check for edge cases but symlink should not be an issue 🤔 Like @Omer suggested, how did you run the swizzle command? From the root of the project by the help of nx or by navigating to the package? Maybe we can get to somewhere with it 🤔 While we're investigating this (with your help 🙏) you can use https://github.com/refinedev/refine/tree/next/packages/chakra-ui/src/components/pages/auth here as a starting point for creating a custom AuthPage component but we recommend using swizzle (if we can have a fix for it quickly) because it uses the same source files but adjusts the imports and replaces the internal code with user-friendly ones 🎉

xenial-black•2y ago

thank you i have tried it, and it still said No refine packages found with swizzle configuration.

Omer•2y ago

Any chance you can share a repo where we can reproduce the issue? Or how can we reproduce?

quickest-silver•2y ago

Found the issue I guess, It's not nx but the workspaces. We check for the swizzle config from ./node_modules and whoami command uses npm ls to find the installed packages. both fails in workspaces. Let me try to fix this by accessing the packages via require rather than fs. As a workaround to use swizzle, I think you can do

cd ./apps/your-refine-app
npm i # install deps of your app
npm run refine -- swizzle # follow the swizzle prompts
rm -rf node_modules package-lock.json # cleanup to not break the workspace

cd ./apps/your-refine-app
npm i # install deps of your app
npm run refine -- swizzle # follow the swizzle prompts
rm -rf node_modules package-lock.json # cleanup to not break the workspace

We'll try to release a fix in cli for workspaces as soon as possible