How to use providers property on AuthPage
How do you actually use it? I specified google like this
But when I click the button it does nothing, no request, no call to login in the authProvider?
6 Replies
Hi @BlackBearFTW. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The
providers
property on the <AuthPage />
component in Refine is used to define the list of providers for handling login authentication. It accepts an array of Provider
type. Each provider object in the array should have a name
, icon
, and label
.
However, just defining the providers in the <AuthPage />
component does not automatically handle the authentication process. The actual authentication logic should be implemented in the authProvider
that you pass to the <Refine />
component.
Here is an example of how to define an authProvider
:
In your case, you might need to check your authProvider
and make sure that the login
method is implemented correctly. When the button is clicked, it should call the login
method in your authProvider
.
For more information, you can refer to the following documentation:
- Refine AuthPage providers (https://refine.dev/docs/ui-integrations/ant-design/components/auth-page#providers)
- Refine AuthProvider (https://refine.dev/docs/tutorial/understanding-authprovider/index#using-auth-providers-in-refine)
- Refine Auth0 AuthProvider (https://refine.dev/docs/advanced-tutorials/auth/auth0#auth-provider)
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@490961337896402944> kapa.ai is still learning and improving, please let us know how it did by reacting below
rival-black•8mo ago
@kapa.ai what property in params should I check?
Let me check the knowledge base for you. One moment! :books:
----------------------
The
params
object in the context of Refine can have different properties depending on the specific use case. Here are some examples from the provided extracts:
1. In the CanParams
type, the params
object can have properties like resource
, action
, id
, and any other key-value pairs. The resource
and action
properties are required, while the others are optional. Here is the type definition for CanParams
:
Source (https://refine.dev/docs/core/interface-references#canparams)
2. In the context of the auditLogProvider.create()
method, the params
object can have properties like action
, resource
, data
, and meta
. Here is an example:
Source (https://refine.dev/blog/refine-pixels-7#logs-table-for-refine-audit-logs)
3. In the context of the useCan
hook, the params
object can have any key-value pairs. Here is an example:
Source (https://refine.dev/docs/authorization/hooks/use-can#params)
4. In the context of the liveProvider's subscribe
method, the params
object can have any key-value pairs. This is used in various hooks like useShow
, useTable
, useSelect
, useList
, useSimpleList
. Here is an example:
Source (https://refine.dev/docs/data/hooks/use-show#liveparams)
In your specific case, you would need to check the properties of the params
object based on the context in which it is being used.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@490961337896402944> kapa.ai is still learning and improving, please let us know how it did by reacting below
rival-black•8mo ago
for anyone searching this, you need the
{"providerName": "your-name-here"}
property on params inside authProvider