metropolitan-bronze•14mo ago

Unable to create login page following refine doc for Azure AD

I'm following Refine doc (Azure Active Directory B2C (AAD B2C))[https://refine.dev/docs/advanced-tutorials/auth/azure-ad/#installation]. Currently I got an error when creating the login.tsx. The error is

Expected 1-2 arguments, but got 0.ts(2554)
types.d.ts(23, 116): Arguments for the rest parameter 'args' were not provided.

Expected 1-2 arguments, but got 0.ts(2554)
types.d.ts(23, 116): Arguments for the rest parameter 'args' were not provided.

and the offending line is login() below, copied from the docs:

        return (
            <Button type="primary" size="large" block onClick={() => login()}>
                Sign in
            </Button>
        );

        return (
            <Button type="primary" size="large" block onClick={() => login()}>
                Sign in
            </Button>
        );

Please help

Azure AD Login | refine

Azure Active Directory B2C provides business-to-customer identity as a service. Your customers use their preferred social, enterprise, or local account identities to get single sign-on access to your applications and APIs.

12 Replies

kapa.ai•14mo ago

Hi @stelarinc. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The error message you're seeing suggests that the login function is expecting 1-2 arguments, but none were provided. This is likely because the login function, as part of the useLogin hook, expects an object with the user's credentials (like username and password) as an argument. In the Refine documentation (https://refine.dev/docs/tutorial/understanding-authprovider/create-authprovider), there's an example of a login function that takes an object with email and password properties as an argument:

const authProvider: AuthBindings = {  
 login: async ({ email, password }) => {  
 // ---  
 return {  
 success: false,  
 error: {  
 name: "Login Failed!",  
 message:  
 "The email or password that you've entered doesn't match any account.",  
 },  
 };  
 },  
 // ---  
};

const authProvider: AuthBindings = {  
 login: async ({ email, password }) => {  
 // ---  
 return {  
 success: false,  
 error: {  
 name: "Login Failed!",  
 message:  
 "The email or password that you've entered doesn't match any account.",  
 },  
 };  
 },  
 // ---  
};

In your case, you might need to modify your login function call to include these arguments. However, without knowing more about your specific implementation, it's hard to provide a more specific solution. You might want to refer back to the Refine documentation (https://refine.dev/docs/tutorial/understanding-authprovider/create-authprovider) or the useLogin documentation (https://refine.dev/docs/api-reference/core/hooks/authentication/useLogin/) for more information on how to use the login function. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•14mo ago

<@1066527438663860284> kapa.ai is still learning and improving, please let us know how it did by reacting below

metropolitan-bronze•14mo ago

@kapa.ai , I'm following the exact Refine Azure AD documentation which doesn't include any arguments in the login(), Am I missing a step or does the documentation require update?

kapa.ai•14mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The login function in the useLogin hook doesn't necessarily require arguments. However, it can accept an object as an argument, which can be used to pass in user credentials or a custom URL for redirection after login. In the Refine documentation (https://refine.dev/docs/api-reference/core/hooks/authentication/useLogin), there's an example of using the login function with user credentials as arguments:

const { mutate: login } = useLogin<LoginVariables>();  
  
const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {  
 e.preventDefault();  
  
 const values = {  
 username: e.currentTarget.username.value,  
 password: e.currentTarget.password.value,  
 };  
  
 login(values);  
};

const { mutate: login } = useLogin<LoginVariables>();  
  
const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {  
 e.preventDefault();  
  
 const values = {  
 username: e.currentTarget.username.value,  
 password: e.currentTarget.password.value,  
 };  
  
 login(values);  
};

And another example of using the login function with a custom URL for redirection:

const { mutate: login } = useLogin();  
  
login({ redirectPath: "/custom-url" });

const { mutate: login } = useLogin();  
  
login({ redirectPath: "/custom-url" });

In your case, the login function is being called without any arguments:

<Button type="primary" size="large" block onClick={() => login()}>
    Sign in
</Button>

<Button type="primary" size="large" block onClick={() => login()}>
    Sign in
</Button>

This should be fine as long as your login method in the authProvider doesn't require any arguments. If your login method does require arguments, you'll need to modify your login function call to include these arguments. If you're still encountering issues, it might be a good idea to double-check your authProvider and make sure it's set up correctly. You can refer to the Refine documentation (https://refine.dev/docs/advanced-tutorials/auth/azure-ad) for more information on setting up the authProvider. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•14mo ago

<@1066527438663860284> kapa.ai is still learning and improving, please let us know how it did by reacting below

metropolitan-bronze•14mo ago

Is there a working github example of refine with Azure AD authentication / authorization?

rare-sapphire•14mo ago

Hey @stelarinc, By default, the login method is not expect any arguments. It's weird, can you provide more information about your problem? What is the error message? What is the code you are using? Or can you provide a codesandbox example to reproduce the problem?

reduced-jade•14mo ago

hey @stelarinc i do it with this example coming from another framework react based : https://github.com/marmelab/ra-auth-msal AZURE AD implement by defaut the MSAL AUTH

metropolitan-bronze•14mo ago

@salihozdemir I got the error as per my original first post. I followed the refine official tutorial to create refine app and subsequently the first thing I did was to change the auth provider to Azure AD. And thats where I got the error. Im pretty new to codesandbox and the like. Will try to find out how to do if I'm still stuck at this stage. @berdailabs thanks. Will try it out and update.

exotic-emerald•14mo ago

Hi @stelarinc , sorry for this problem. I think there is a bug in our document. Let us check and get back to you 🚀 Hi @stelarinc, I could not reproduce the problem you are having. However, I can suggest passing an empty object to the login method.

return (
            <Button type="primary" size="large" block onClick={() => login({})}>
                Sign in
            </Button>
        );

return (
            <Button type="primary" size="large" block onClick={() => login({})}>
                Sign in
            </Button>
        );

Hi @stelarinc Do you have any updates for that?

metropolitan-bronze•14mo ago

I tried with giving login an empty object, but it still giving error. Im still trying to use MS docs to perform the authentication. It seems to work but there're some other issues that Im troubleahooting (issue with msal rather than with refine itself) Nevertheless, I tried to redo the refine app from the start and immediately following that I followed the refine docs for AD authentication. I arrived at the same issue

exotic-emerald•14mo ago

We could not reproduce the same problem. We have no experience with Azure AD. Can we open a test account and get this information?

auth: {
        clientId: "YOUR_CLIENT_ID", //`${process.env.REACT_APP_AZURE_AAD_CLIENT_ID}`,
        authority: "YOUR_AUTHORITY", //`https://${process.env.REACT_APP_AZURE_AAD_TENANT_NAME}.b2clogin.com/${process.env.REACT_APP_AZURE_AAD_TENANT_NAME}.onmicrosoft.com/${process.env.REACT_APP_AZURE_AAD_POLICY_NAME}`,
        knownAuthorities: ["YOUR_KNOWN_AUTHORITIES"], //[`${process.env.REACT_APP_AZURE_AAD_TENANT_NAME}.b2clogin.com`],
        redirectUri: "http://localhost:3000/", // Replace appropriately
        postLogoutRedirectUri: window.location.origin,
    },

auth: {
        clientId: "YOUR_CLIENT_ID", //`${process.env.REACT_APP_AZURE_AAD_CLIENT_ID}`,
        authority: "YOUR_AUTHORITY", //`https://${process.env.REACT_APP_AZURE_AAD_TENANT_NAME}.b2clogin.com/${process.env.REACT_APP_AZURE_AAD_TENANT_NAME}.onmicrosoft.com/${process.env.REACT_APP_AZURE_AAD_POLICY_NAME}`,
        knownAuthorities: ["YOUR_KNOWN_AUTHORITIES"], //[`${process.env.REACT_APP_AZURE_AAD_TENANT_NAME}.b2clogin.com`],
        redirectUri: "http://localhost:3000/", // Replace appropriately
        postLogoutRedirectUri: window.location.origin,
    },

I believe if we can reproduce the problem, we will solve the problem.