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
conventional-tan
conventional-tan2y 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
quickest-silver
quickest-silver2y ago
i am getting No refine packages found with swizzle configuration.
conventional-tan
conventional-tan2y ago
can u paste whoami output ? i will try to reproduce and debug
quickest-silver
quickest-silver2y 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.
conventional-tan
conventional-tan2y 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
quickest-silver
quickest-silver2y 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"
}
conventional-tan
conventional-tan2y ago
thank you for clear explanation. we are investigating with the team 🙏
Omer
Omer2y 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
rival-black
rival-black2y 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 🎉
quickest-silver
quickest-silver2y ago
thank you i have tried it, and it still said No refine packages found with swizzle configuration.
Omer
Omer2y ago
Any chance you can share a repo where we can reproduce the issue? Or how can we reproduce?
rival-black
rival-black2y 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