# User Settings

The User Settings page provides a prebuilt user interface for logged-in users of an Authgear project to view and edit their account settings.

<figure><img src="https://2638622528-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MAjXpMovvVxeIY33s_K%2Fuploads%2Fgit-blob-dff3d1f6c54d422bd70575cdcee538be545a6a5f%2Fauthgear-new-user-settings.png?alt=media" alt=""><figcaption><p>user settings ui</p></figcaption></figure>

## Actions in the settings page

The end-user can perform the following actions on the setting page:

* Change their password.
* Add or change their email, phone number, or username.
* Connect or disconnect to identity providers.
* Manage their signed-in sessions.
* Enable or disable 2-step verification.
* and many more.

## Open the settings page in websites

{% tabs %}
{% tab title="Next.js" %}
Use the `<UserSettingsButton>` component from `@authgear/nextjs/client`. It exchanges the user's session for a short-lived token and opens the pre-authenticated Settings page in a new tab — no Server Action required.

```tsx
import { UserSettingsButton } from "@authgear/nextjs/client";

export default function Dashboard() {
  return (
    <UserSettingsButton>Account Settings</UserSettingsButton>
  );
}
```

The button must be rendered inside `<AuthgearProvider>`. Guard it with an authentication check to avoid errors when the user is not signed in:

```tsx
const { isAuthenticated } = useAuthgear();

<UserSettingsButton disabled={!isAuthenticated}>
  Account Settings
</UserSettingsButton>
```

See the [Next.js guide](https://docs.authgear.com/get-started/regular-web-app/nextjs#opening-user-settings) for more options such as styling and customising the route path.
{% endtab %}

{% tab title="Web SDK" %}
Use the `open()` method of the Authgear Web SDK to open the built-in settings page.

```tsx
import authgear, { Page } from "@authgear/web";

const openSettings = () => {
    authgear.open(Page.Settings)
}
```

{% endtab %}
{% endtabs %}

## Open the settings page with the SDK in mobile apps

If you are working on a mobile app, you can open the settings page using any of our mobile SDKs. When the end-user has signed in, the SDK provides a method to open the settings page in a Webview.

{% tabs %}
{% tab title="React Native" %}

```typescript
import React, { useCallback } from "react";
import authgear, { Page } from "@authgear/react-native";
import { View, Button } from "react-native";

function SettingsScreen() {
  const onPressOpenSettingsPage = useCallback(() => {
    authgear.open(Page.Settings).then(() => {
      // When the promise resolves, the webview have been closed.
    });
  }, []);
  return (
    <View>
      <Button
        title="Open Settings Page"
        onPress={onPressOpenSettingsPage}
      />
    </View>
  );
}
```

{% endtab %}

{% tab title="Flutter" %}

```dart
Future<void> onPressOpenSettingsPage() async {
  await authgear.open(SettingsPage.settings);
}
```

{% endtab %}

{% tab title="Xamarin" %}

```csharp
async void OnOpenSettingsClicked(object sender, EventArgs args)
{
  await authgear.OpenAsync(SettingsPage.Settings);
}
```

{% endtab %}

{% tab title="iOS" %}

```swift
func onPressOpenSettingsPage(sender: UIButton, forEvent event: UIEvent) {
    authgear.open(.settings) {
        // When the completion handler is called, the webview is closed.
    }
}
```

{% endtab %}

{% tab title="Android" %}

```java
public void onClickOpenSettingsPage() {
    authgear.open(Page.Settings, null, new OnOpenURLListener() {
        @Override
        public void onClosed() {
            // The webview is closed.
        }

        @Override
        public void onFailed(Throwable throwable) {
            // Some error occurred.
        }
    });
}
```

{% endtab %}
{% endtabs %}

## Back to my app button

In a web-based application, you may want to add the "Back to my app" button to the settings page so the user can navigate back to your website after changing the settings.

To enable the back button, navigate to **Branding** > **Design** in Authgear Portal.\
Toggle the **Show “Back to your app” button in the settings page** switch on. Enter the destination URL for the 'Back to my app' button below the switch.

Click **Save** to apply your new settings.

<figure><img src="https://2638622528-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MAjXpMovvVxeIY33s_K%2Fuploads%2Fgit-blob-4ef51891f828e888ca5d3b07b0e9b43864e3849d%2Fauthgear-design-user-settings-back.png?alt=media" alt=""><figcaption></figcaption></figure>

## Customize User Settings Page

You can customize the look and feel of the User Settings page using the [UI design](https://docs.authgear.com/customization/built-in-ui/branding) tool in Authgear Portal.

Navigate to **Branding** > **Design** in Authgear Portal to customize the User Settings page.

The theme (dark, light, or auto), logo, colors, border, etc. you set for AuthUI will also apply to the User Settings page.