Refine•2y ago

if authenticated

I want to add a conditional button for link to "dashboard" if logged in on public page

kapa.ai•6/14/24, 10:36 AM

Hi @Deepanshu Bajaj. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

kapa.ai•6/14/24, 10:36 AM

----------------------
To add a conditional button that links to the "dashboard" if the user is authenticated on a public page, you can use the

Authenticated

Authenticated

component from Refine. This component checks the authentication status and allows you to render different UI elements based on whether the user is logged in or not.

Here's an example of how you can achieve this:

In this example:

The
```
Authenticated
```
```
Authenticated
```
component is used to check if the user is logged in.
If the user is authenticated, a button linking to the "dashboard" is displayed.
If the user is not authenticated, a fallback message is shown instead.

This approach ensures that only authenticated users see the button to navigate to the dashboard.

For more details on the

Authenticated

Authenticated

component, you can refer to the Refine documentation (https://refine.dev/docs/api-reference/core/components/auth/authenticated/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•6/14/24, 10:37 AM

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

popular-magentaOP•6/14/24, 10:43 AM

@kapa.ai what will be the "key" for authenticated ?

kapa.ai•6/14/24, 10:43 AM

Let me check the knowledge base for you. One moment!

kapa.ai•6/14/24, 10:43 AM

----------------------
The

key

key

prop for the

Authenticated

Authenticated

component is crucial for ensuring that the component is properly unmounted and remounted, especially when used multiple times at the same tree level. This helps avoid unexpected behaviors and ensures that the authentication logic works correctly.

Here is how you can add the

key

key

prop to the

Authenticated

Authenticated

component in your example:

In this example:

The
```
key
```
```
key
```
prop is set to . You can choose any unique string value for the
```
key
```
```
key
```
prop to differentiate this instance of the
```
Authenticated
```
```
Authenticated
```
component from others.

For more details on why the

key

key

prop is required and how it works, you can refer to the Refine documentation (https://refine.dev/docs/authentication/components/authenticated/#key-).

By setting the

key

key

prop, you ensure that React will unmount and remount the

Authenticated

Authenticated

component instead of just updating its props, which is essential for maintaining correct authentication behavior.
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•6/14/24, 10:43 AM

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