Skip to content

Commit 4081721

Browse files
Merge pull request #616 from supertokens/dashboard-docs-change
Update dashboard docs to include details about email password login
2 parents 4d580d8 + 2e89ffb commit 4081721

File tree

15 files changed

+552
-165
lines changed

15 files changed

+552
-165
lines changed

v2/emailpassword/custom-ui/init/dashboard.mdx

Lines changed: 50 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,11 @@ import BackendSDKTabs from "/src/components/tabs/BackendSDKTabs";
1414
import TabItem from '@theme/TabItem';
1515
import AppInfoForm from "/src/components/appInfoForm"
1616

17-
## Setting up and viewing the user management dashboard
17+
## Initialise the dashboard recipe
1818

1919
<AppInfoForm askForAPIDomain>
2020

21-
With the user management dashboard, you can view the list of users on SuperTokens and be able to easily view, modify or delete their sessions, metadata, roles and account info.
22-
23-
To get started, initialise the Dashboard recipe in the `recipeList` on the backend and provide a random and unique API key that is known only to you. This API key will later be used to access the dashboard from the UI.
21+
To get started, initialise the Dashboard recipe in the `recipeList`.
2422

2523
<BackendSDKTabs>
2624
<TabItem value="nodejs">
@@ -36,10 +34,9 @@ SuperTokens.init({
3634
websiteDomain: "...",
3735
},
3836
recipeList: [
37+
// TODO: Initialise other recipes
3938
// highlight-start
40-
Dashboard.init({
41-
apiKey: "<SOME API KEY>"
42-
}),
39+
Dashboard.init(),
4340
// highlight-end
4441
],
4542
});
@@ -58,10 +55,9 @@ import (
5855
func main() {
5956
supertokens.Init(supertokens.TypeInput{
6057
RecipeList: []supertokens.Recipe{
58+
// TODO: Initialise other recipes
6159
// highlight-start
62-
dashboard.Init(dashboardmodels.TypeInput{
63-
ApiKey: "<SOME API KEY>",
64-
}),
60+
dashboard.Init(nil),
6561
// highlight-end
6662
},
6763
})
@@ -80,8 +76,9 @@ init(
8076
api_domain="...", app_name="...", website_domain="..."),
8177
framework='...', # type: ignore
8278
recipe_list=[
79+
# TODO: Initialise other recipes
8380
# highlight-start
84-
dashboard.init(api_key="<SOME API KEY>"),
81+
dashboard.init(),
8582
# highlight-end
8683
]
8784
)
@@ -90,15 +87,53 @@ init(
9087
</TabItem>
9188
</BackendSDKTabs>
9289

93-
Now, if you navigate to `^{form_apiDomain}^{form_apiBasePath}/dashboard`, you will now be able to see the enter API screen.
90+
## Viewing the dashboard
91+
92+
:::important
93+
The user management dashboard is served by the backend SDK, you have to use your API domain when trying to visit the dashboard.
94+
:::
95+
96+
Navigate to `^{form_apiDomain}^{form_apiBasePath}/dashboard` to view the dashboard.
97+
98+
<img src="/img/dashboard/login.png" alt="Dashboard login screen" />
99+
100+
## Creating dashboard credentials
101+
102+
:::tip Paid Feature
103+
You can create one dashboard user* for free. If you need to create additional users please email us at [email protected].
104+
105+
*: A dashboard user is a user that can log into and view the user management dashboard. These users are independent to the users of your application
106+
:::
107+
108+
When you first setup SuperTokens, there are no credentials created for the dashboard. If you click the "Add a new user" button in the dashboard login screen you can see the command you need to execute in order to create credentials.
109+
110+
<img src="/img/dashboard/signup.png" alt="Dashboard login screen" />
111+
112+
To create credentials you need to make a request to SuperTokens core.
113+
114+
- The example above uses the demo core `https://try.supertokens.com`, replace this with the connection uri you pass to the backend SDK when initialising SuperTokens.
115+
- Replace `<YOUR-API-KEY>` with your API key. If you are using a self hosted SuperTokens core there is no API key by default. In that case you can either skip or ignore the `api-key` header.
116+
- Replace `<YOUR_EMAIL>` and `<YOUR_PASSWORD>` with the appropriate values
117+
118+
## Updating dashboard credentials
119+
120+
You can update the email or password of existing credentials by using the "Forgot Password" button on the dashboard login page.
121+
122+
<img src="/img/dashboard/forgot-password.png" alt="Dashboard login screen" />
123+
124+
To update credentials you need to make a request to SuperTokens core.
125+
126+
- The example above uses the demo core `https://try.supertokens.com`, replace this with the connection uri you pass to the backend SDK when initialising SuperTokens.
127+
- Replace `<YOUR-API-KEY>` with your API key. If you are using a self hosted SuperTokens core there is no API key by default. In that case you can either skip or ignore the `api-key` header.
128+
- Replace `<YOUR_EMAIL>` and `<YOUR_NEW_PASSWORD>` with the appropriate values. You can use `newEmail` instead of `newPassword` if you want to update the email
94129

95-
<img src="/img/dashboard/api-key.png" alt="Enter API screen of dashboard" />
130+
## Viewing users
96131

97-
You should enter the same API as the one you provided in the `dashboard.init` function call. On successful authentication, you will see the following UI
132+
If you have just created your app, you may not have any users to show on the dashboard.
98133

99134
<img src="/img/dashboard/no-users.png" alt="Empty dashboard" />
100135

101-
Now, navigate to the your frontend app and create a user (via the sign up flow). On creation, if you head back to the dashboard and refresh the page, you will see that user:
136+
Navigate to the your frontend app and create a user (via the sign up flow). On creation, if you head back to the dashboard and refresh the page, you will see that user:
102137

103138
<img src="/img/dashboard/one-user.png" alt="One user in dashboard" />
104139

v2/emailpassword/pre-built-ui/setup/dashboard.mdx

Lines changed: 50 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,11 @@ import BackendSDKTabs from "/src/components/tabs/BackendSDKTabs";
1414
import TabItem from '@theme/TabItem';
1515
import AppInfoForm from "/src/components/appInfoForm"
1616

17-
## Setting up and viewing the user management dashboard
17+
## Initialise the dashboard recipe
1818

1919
<AppInfoForm askForAPIDomain>
2020

21-
With the user management dashboard, you can view the list of users on SuperTokens and be able to easily view, modify or delete their sessions, metadata, roles and account info.
22-
23-
To get started, initialise the Dashboard recipe in the `recipeList` on the backend and provide a random and unique API key that is known only to you. This API key will later be used to access the dashboard from the UI.
21+
To get started, initialise the Dashboard recipe in the `recipeList`.
2422

2523
<BackendSDKTabs>
2624
<TabItem value="nodejs">
@@ -36,10 +34,9 @@ SuperTokens.init({
3634
websiteDomain: "...",
3735
},
3836
recipeList: [
37+
// TODO: Initialise other recipes
3938
// highlight-start
40-
Dashboard.init({
41-
apiKey: "<SOME API KEY>"
42-
}),
39+
Dashboard.init(),
4340
// highlight-end
4441
],
4542
});
@@ -58,10 +55,9 @@ import (
5855
func main() {
5956
supertokens.Init(supertokens.TypeInput{
6057
RecipeList: []supertokens.Recipe{
58+
// TODO: Initialise other recipes
6159
// highlight-start
62-
dashboard.Init(dashboardmodels.TypeInput{
63-
ApiKey: "<SOME API KEY>",
64-
}),
60+
dashboard.Init(nil),
6561
// highlight-end
6662
},
6763
})
@@ -80,8 +76,9 @@ init(
8076
api_domain="...", app_name="...", website_domain="..."),
8177
framework='...', # type: ignore
8278
recipe_list=[
79+
# TODO: Initialise other recipes
8380
# highlight-start
84-
dashboard.init(api_key="<SOME API KEY>"),
81+
dashboard.init(),
8582
# highlight-end
8683
]
8784
)
@@ -90,15 +87,53 @@ init(
9087
</TabItem>
9188
</BackendSDKTabs>
9289

93-
Now, if you navigate to `^{form_apiDomain}^{form_apiBasePath}/dashboard`, you will now be able to see the enter API screen.
90+
## Viewing the dashboard
91+
92+
:::important
93+
The user management dashboard is served by the backend SDK, you have to use your API domain when trying to visit the dashboard.
94+
:::
95+
96+
Navigate to `^{form_apiDomain}^{form_apiBasePath}/dashboard` to view the dashboard.
97+
98+
<img src="/img/dashboard/login.png" alt="Dashboard login screen" />
99+
100+
## Creating dashboard credentials
101+
102+
:::tip Paid Feature
103+
You can create one dashboard user* for free. If you need to create additional users please email us at [email protected].
104+
105+
*: A dashboard user is a user that can log into and view the user management dashboard. These users are independent to the users of your application
106+
:::
107+
108+
When you first setup SuperTokens, there are no credentials created for the dashboard. If you click the "Add a new user" button in the dashboard login screen you can see the command you need to execute in order to create credentials.
109+
110+
<img src="/img/dashboard/signup.png" alt="Dashboard login screen" />
111+
112+
To create credentials you need to make a request to SuperTokens core.
113+
114+
- The example above uses the demo core `https://try.supertokens.com`, replace this with the connection uri you pass to the backend SDK when initialising SuperTokens.
115+
- Replace `<YOUR-API-KEY>` with your API key. If you are using a self hosted SuperTokens core there is no API key by default. In that case you can either skip or ignore the `api-key` header.
116+
- Replace `<YOUR_EMAIL>` and `<YOUR_PASSWORD>` with the appropriate values
117+
118+
## Updating dashboard credentials
119+
120+
You can update the email or password of existing credentials by using the "Forgot Password" button on the dashboard login page.
121+
122+
<img src="/img/dashboard/forgot-password.png" alt="Dashboard login screen" />
123+
124+
To update credentials you need to make a request to SuperTokens core.
125+
126+
- The example above uses the demo core `https://try.supertokens.com`, replace this with the connection uri you pass to the backend SDK when initialising SuperTokens.
127+
- Replace `<YOUR-API-KEY>` with your API key. If you are using a self hosted SuperTokens core there is no API key by default. In that case you can either skip or ignore the `api-key` header.
128+
- Replace `<YOUR_EMAIL>` and `<YOUR_NEW_PASSWORD>` with the appropriate values. You can use `newEmail` instead of `newPassword` if you want to update the email
94129

95-
<img src="/img/dashboard/api-key.png" alt="Enter API screen of dashboard" />
130+
## Viewing users
96131

97-
You should enter the same API as the one you provided in the `dashboard.init` function call. On successful authentication, you will see the following UI
132+
If you have just created your app, you may not have any users to show on the dashboard.
98133

99134
<img src="/img/dashboard/no-users.png" alt="Empty dashboard" />
100135

101-
Now, navigate to the your frontend app and create a user (via the sign up flow). On creation, if you head back to the dashboard and refresh the page, you will see that user:
136+
Navigate to the your frontend app and create a user (via the sign up flow). On creation, if you head back to the dashboard and refresh the page, you will see that user:
102137

103138
<img src="/img/dashboard/one-user.png" alt="One user in dashboard" />
104139

v2/passwordless/custom-ui/init/dashboard.mdx

Lines changed: 50 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,11 @@ import BackendSDKTabs from "/src/components/tabs/BackendSDKTabs";
1414
import TabItem from '@theme/TabItem';
1515
import AppInfoForm from "/src/components/appInfoForm"
1616

17-
## Setting up and viewing the user management dashboard
17+
## Initialise the dashboard recipe
1818

1919
<AppInfoForm askForAPIDomain>
2020

21-
With the user management dashboard, you can view the list of users on SuperTokens and be able to easily view, modify or delete their sessions, metadata, roles and account info.
22-
23-
To get started, initialise the Dashboard recipe in the `recipeList` on the backend and provide a random and unique API key that is known only to you. This API key will later be used to access the dashboard from the UI.
21+
To get started, initialise the Dashboard recipe in the `recipeList`.
2422

2523
<BackendSDKTabs>
2624
<TabItem value="nodejs">
@@ -36,10 +34,9 @@ SuperTokens.init({
3634
websiteDomain: "...",
3735
},
3836
recipeList: [
37+
// TODO: Initialise other recipes
3938
// highlight-start
40-
Dashboard.init({
41-
apiKey: "<SOME API KEY>"
42-
}),
39+
Dashboard.init(),
4340
// highlight-end
4441
],
4542
});
@@ -58,10 +55,9 @@ import (
5855
func main() {
5956
supertokens.Init(supertokens.TypeInput{
6057
RecipeList: []supertokens.Recipe{
58+
// TODO: Initialise other recipes
6159
// highlight-start
62-
dashboard.Init(dashboardmodels.TypeInput{
63-
ApiKey: "<SOME API KEY>",
64-
}),
60+
dashboard.Init(nil),
6561
// highlight-end
6662
},
6763
})
@@ -80,8 +76,9 @@ init(
8076
api_domain="...", app_name="...", website_domain="..."),
8177
framework='...', # type: ignore
8278
recipe_list=[
79+
# TODO: Initialise other recipes
8380
# highlight-start
84-
dashboard.init(api_key="<SOME API KEY>"),
81+
dashboard.init(),
8582
# highlight-end
8683
]
8784
)
@@ -90,15 +87,53 @@ init(
9087
</TabItem>
9188
</BackendSDKTabs>
9289

93-
Now, if you navigate to `^{form_apiDomain}^{form_apiBasePath}/dashboard`, you will now be able to see the enter API screen.
90+
## Viewing the dashboard
91+
92+
:::important
93+
The user management dashboard is served by the backend SDK, you have to use your API domain when trying to visit the dashboard.
94+
:::
95+
96+
Navigate to `^{form_apiDomain}^{form_apiBasePath}/dashboard` to view the dashboard.
97+
98+
<img src="/img/dashboard/login.png" alt="Dashboard login screen" />
99+
100+
## Creating dashboard credentials
101+
102+
:::tip Paid Feature
103+
You can create one dashboard user* for free. If you need to create additional users please email us at [email protected].
104+
105+
*: A dashboard user is a user that can log into and view the user management dashboard. These users are independent to the users of your application
106+
:::
107+
108+
When you first setup SuperTokens, there are no credentials created for the dashboard. If you click the "Add a new user" button in the dashboard login screen you can see the command you need to execute in order to create credentials.
109+
110+
<img src="/img/dashboard/signup.png" alt="Dashboard login screen" />
111+
112+
To create credentials you need to make a request to SuperTokens core.
113+
114+
- The example above uses the demo core `https://try.supertokens.com`, replace this with the connection uri you pass to the backend SDK when initialising SuperTokens.
115+
- Replace `<YOUR-API-KEY>` with your API key. If you are using a self hosted SuperTokens core there is no API key by default. In that case you can either skip or ignore the `api-key` header.
116+
- Replace `<YOUR_EMAIL>` and `<YOUR_PASSWORD>` with the appropriate values
117+
118+
## Updating dashboard credentials
119+
120+
You can update the email or password of existing credentials by using the "Forgot Password" button on the dashboard login page.
121+
122+
<img src="/img/dashboard/forgot-password.png" alt="Dashboard login screen" />
123+
124+
To update credentials you need to make a request to SuperTokens core.
125+
126+
- The example above uses the demo core `https://try.supertokens.com`, replace this with the connection uri you pass to the backend SDK when initialising SuperTokens.
127+
- Replace `<YOUR-API-KEY>` with your API key. If you are using a self hosted SuperTokens core there is no API key by default. In that case you can either skip or ignore the `api-key` header.
128+
- Replace `<YOUR_EMAIL>` and `<YOUR_NEW_PASSWORD>` with the appropriate values. You can use `newEmail` instead of `newPassword` if you want to update the email
94129

95-
<img src="/img/dashboard/api-key.png" alt="Enter API screen of dashboard" />
130+
## Viewing users
96131

97-
You should enter the same API as the one you provided in the `dashboard.init` function call. On successful authentication, you will see the following UI
132+
If you have just created your app, you may not have any users to show on the dashboard.
98133

99134
<img src="/img/dashboard/no-users.png" alt="Empty dashboard" />
100135

101-
Now, navigate to the your frontend app and create a user (via the sign up flow). On creation, if you head back to the dashboard and refresh the page, you will see that user:
136+
Navigate to the your frontend app and create a user (via the sign up flow). On creation, if you head back to the dashboard and refresh the page, you will see that user:
102137

103138
<img src="/img/dashboard/one-user.png" alt="One user in dashboard" />
104139

0 commit comments

Comments
 (0)