Skip to content

Commit f7f64a9

Browse files
rishabhpoddarrishabhpoddar
authored
Merge pull request #752 from supertokens/dashboard-userroles
Adding docs for userroles and permissions on user management dashboard.
2 parents bd31923 + cadb49b commit f7f64a9

File tree

89 files changed

+5239
-2773
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

89 files changed

+5239
-2773
lines changed

‎v2/community/reusableMD/intro-architecture.mdx

+2-3
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,17 @@ values={[
99
{label: 'Self hosted', value: 'ss'},
1010
]}>
1111
<TabItem value="ms">
12-
<img src="/img/architecture/managed_service_generic.png" alt="Flowchart of architecture when using SuperTokens managed service" />
12+
<img src="/img/architecture/managed_service_without_dashboard.png" alt="Flowchart of architecture when using SuperTokens managed service" />
1313
</TabItem>
1414
<TabItem value="ss">
15-
<img src="/img/architecture/self_hosted_generic.png" alt="Flowchart of architecture when self-hosting SuperTokens" />
15+
<img src="/img/architecture/self_hosted_without_dashboard.png" alt="Flowchart of architecture when self-hosting SuperTokens" />
1616
</TabItem>
1717
</Tabs>
1818

1919
There are three components to SuperTokens:
2020
- **Frontend SDK**: Provides pre built UI, helper functions and / or session management on the frontend.
2121
- **Backend SDK**:
2222
- Provides a middleware which exposes all the auth related APIs for your frontend to call. It also handles session management and access control for your APIs.
23-
- Serves the user management dashboard which can be accessed on the `/auth/dashboard` path of your API domain.
2423
- If your tech stack uses a backend framework that is not supported by SuperTokens, you can follow our [guide on spinning up a separate server configured with the SuperTokens backend SDK](/docs/community/other-frameworks) to authenticate requests and issue session tokens.
2524
- **SuperTokens core service**: This is called by the backend SDK to maintain state in the database. This can either be self hosted using docker or be managed by us if you sign up on supertokens.com
2625

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

+2-273
Original file line numberDiff line numberDiff line change
@@ -4,278 +4,7 @@ title: "Step 4: User management dashboard"
44
hide_title: true
55
---
66

7-
# Step 4: User management dashboard
87

9-
<!-- COPY SECTION -->
10-
<!-- ./userdashboard/about.mdx -->
11-
<!-- 1 -->
8+
import Redirector from '/src/components/Redirector';
129

13-
import BackendSDKTabs from "/src/components/tabs/BackendSDKTabs";
14-
import TabItem from '@theme/TabItem';
15-
import AppInfoForm from "/src/components/appInfoForm"
16-
import CustomAdmonition from "/src/components/customAdmonition"
17-
18-
## Initialise the dashboard recipe
19-
20-
<AppInfoForm askForAPIDomain>
21-
22-
To get started, initialise the Dashboard recipe in the `recipeList`.
23-
24-
<BackendSDKTabs>
25-
<TabItem value="nodejs">
26-
27-
```tsx
28-
import SuperTokens from "supertokens-node";
29-
import Dashboard from "supertokens-node/recipe/dashboard";
30-
31-
SuperTokens.init({
32-
appInfo: {
33-
apiDomain: "...",
34-
appName: "...",
35-
websiteDomain: "...",
36-
},
37-
recipeList: [
38-
// TODO: Initialise other recipes
39-
// highlight-start
40-
Dashboard.init(),
41-
// highlight-end
42-
],
43-
});
44-
```
45-
46-
</TabItem>
47-
<TabItem value="go">
48-
49-
```go
50-
import (
51-
"github.com/supertokens/supertokens-golang/recipe/dashboard"
52-
"github.com/supertokens/supertokens-golang/supertokens"
53-
)
54-
55-
func main() {
56-
supertokens.Init(supertokens.TypeInput{
57-
RecipeList: []supertokens.Recipe{
58-
// TODO: Initialise other recipes
59-
// highlight-start
60-
dashboard.Init(nil),
61-
// highlight-end
62-
},
63-
});
64-
}
65-
```
66-
67-
</TabItem>
68-
<TabItem value="python">
69-
70-
```python
71-
from supertokens_python import init, InputAppInfo
72-
from supertokens_python.recipe import dashboard
73-
74-
init(
75-
app_info=InputAppInfo(
76-
api_domain="...", app_name="...", website_domain="..."),
77-
framework='...', # type: ignore
78-
recipe_list=[
79-
# TODO: Initialise other recipes
80-
# highlight-start
81-
dashboard.init(),
82-
# highlight-end
83-
]
84-
)
85-
```
86-
87-
</TabItem>
88-
</BackendSDKTabs>
89-
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-
<CustomAdmonition type="paid-feature">
103-
104-
You can create 3 dashboard users* for free.
105-
106-
If you need to create additional users:
107-
108-
- For self hosted users, please [sign up](https://supertokens.com/auth) to generate a license key and follow the instructions sent to you by email.
109-
- For managed service users, you can click on the "enable paid features" button on [our dashboard](https://supertokens.com/dashboard-saas), and follow the steps from there on.
110-
111-
*: 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
112-
113-
</CustomAdmonition>
114-
115-
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.
116-
117-
<img src="/img/dashboard/signup.png" alt="Dashboard login screen" />
118-
119-
To create credentials you need to make a request to SuperTokens core.
120-
121-
- 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.
122-
- 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.
123-
- Replace `<YOUR_EMAIL>` and `<YOUR_PASSWORD>` with the appropriate values.
124-
125-
:::caution
126-
If using self hosted SuperTokens core, you need to make sure that you add an API key to the core in case it's exposed to the internet. Otherwise anyone will be able to create or modify dashboard users.
127-
128-
You can add an API key to the core by following the instructions "Auth flow customizations" > "SuperTokens core settings" > "Adding API keys" page.
129-
:::
130-
131-
## Updating dashboard credentials
132-
133-
You can update the email or password of existing credentials by using the "Forgot Password" button on the dashboard login page.
134-
135-
<img src="/img/dashboard/forgot-password.png" alt="Dashboard login screen" />
136-
137-
To update credentials you need to make a request to SuperTokens core.
138-
139-
- 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.
140-
- 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.
141-
- 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
142-
143-
## Viewing users list
144-
145-
If you have just created your app, you may not have any users to show on the dashboard.
146-
147-
<img src="/img/dashboard/no-users.png" alt="Empty dashboard" />
148-
149-
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:
150-
151-
<img src="/img/dashboard/one-user.png" alt="One user in dashboard" />
152-
153-
</AppInfoForm>
154-
155-
## User details page
156-
157-
When you select a user you can view detailed information about the user such as email, phone number, user metadata etc.
158-
159-
<img src="/img/dashboard/user-info.png" alt="One user in dashboard" />
160-
161-
<img src="/img/dashboard/user-info-continued.png" alt="One user in dashboard" />
162-
163-
You can edit user information and perform actions such as resetting a user's password or revoke sessions for a user.
164-
165-
<img src="/img/dashboard/reset-password.png" alt="One user in dashboard" />
166-
167-
:::important Note
168-
Some features such as user metadata and email verification have to be enabled in your backend before you can use them in the user management dashboard
169-
:::
170-
171-
## Managing roles and permissions
172-
173-
:::note
174-
Coming Soon
175-
:::
176-
177-
## Restricting access to dashboard users
178-
179-
When using the dashboard recipe you can restrict access to certain features by providing a list of emails to be considered as "admins". When a dashboard user logs in with an email not present in this list, they will only be able to perform read operations and all write operations will result in the backend SDKs failing the request.
180-
181-
You can provide an array of emails to the backend SDK when initialising the dashboard recipe:
182-
183-
:::important
184-
- Not providing an admins array will result in all dashboard users being allowed both read and write operations
185-
- Providing an empty array as admins will result in all dashboard users having ONLY read access
186-
:::
187-
188-
<BackendSDKTabs>
189-
<TabItem value="nodejs">
190-
191-
```tsx
192-
import SuperTokens from "supertokens-node";
193-
import Dashboard from "supertokens-node/recipe/dashboard";
194-
195-
SuperTokens.init({
196-
appInfo: {
197-
apiDomain: "...",
198-
appName: "...",
199-
websiteDomain: "...",
200-
},
201-
recipeList: [
202-
// TODO: Initialise other recipes
203-
// highlight-start
204-
Dashboard.init({
205-
admins: [
206-
"[email protected]",
207-
],
208-
}),
209-
// highlight-end
210-
],
211-
});
212-
```
213-
214-
</TabItem>
215-
<TabItem value="go">
216-
217-
```go
218-
import (
219-
"github.com/supertokens/supertokens-golang/recipe/dashboard"
220-
"github.com/supertokens/supertokens-golang/supertokens"
221-
"github.com/supertokens/supertokens-golang/recipe/dashboard/dashboardmodels"
222-
)
223-
224-
func main() {
225-
supertokens.Init(supertokens.TypeInput{
226-
RecipeList: []supertokens.Recipe{
227-
// TODO: Initialise other recipes
228-
// highlight-start
229-
dashboard.Init(&dashboardmodels.TypeInput{
230-
Admins: &[]string{
231-
"[email protected]",
232-
},
233-
}),
234-
// highlight-end
235-
},
236-
});
237-
}
238-
```
239-
240-
</TabItem>
241-
<TabItem value="python">
242-
243-
```python
244-
from supertokens_python import init, InputAppInfo
245-
from supertokens_python.recipe import dashboard
246-
247-
init(
248-
app_info=InputAppInfo(
249-
api_domain="...", app_name="...", website_domain="..."),
250-
framework='...', # type: ignore
251-
recipe_list=[
252-
# TODO: Initialise other recipes
253-
# highlight-start
254-
dashboard.init(
255-
admins=[
256-
"[email protected]",
257-
],
258-
),
259-
# highlight-end
260-
]
261-
)
262-
```
263-
264-
</TabItem>
265-
</BackendSDKTabs>
266-
267-
## Content Security Policy
268-
269-
If you return a `Content-Security-Policy` header in from your backend, you will need to include the following directives for the user management dashboard to work correctly
270-
271-
```text
272-
script-src:
273-
'self'
274-
'unsafe-inline'
275-
https://cdn.jsdelivr.net/gh/supertokens/
276-
277-
img-src:
278-
https://cdn.jsdelivr.net/gh/supertokens/
279-
```
280-
281-
<!-- END COPY SECTION -->
10+
<Redirector to='./user-management-dashboard/setup' />

0 commit comments

Comments
 (0)