You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
-**Input Widget** (`emailInput`) – Used to capture the user's email or username.
68
57
58
+
-**Input Widget** (`passwordInput`) – Used to capture the user's password. Set the input type to password to mask the input.
69
59
70
-
2. Create **Inputs**from the right-side property pane to dynamically pass user data to the query. For example, create two inputs: one for **email** and one for **password**.
60
+
-**Button Widget**(`loginButton`) – Triggers the login process when clicked.
*Example*: if the API expects data in JSON format, select Body in the API, and then select JSON. Use the inputs property to bind the data, like:
80
+
Body:
84
81
85
82
```js
86
83
{
87
-
"email": {{inputs.email}},
88
-
"password": {{inputs.password}}
84
+
"email": {{emailInput.text}},
85
+
"password": {{passwordInput.text}}
89
86
}
90
87
```
91
88
89
+
The values for email and password are dynamically taken from the input widgets (`emailInput` and `passwordInput`) inside the module.
92
90
93
-
</dd>
94
91
92
+
</dd>
95
93
96
-
3. Create a new JS module to handle the sign-in process by calling the `sign_in` API query with the provided `email` and `password`, storing the response data in local storage, and navigating to the `Home` page upon successful authentication.
94
+
3. Create a new JS Object inside the UI Module to manage the login logic. This function will call the login API query with the provided email and password, store the authentication token in local storage using storeValue, and navigate to the Home page upon successful authentication.
97
95
98
96
<dd>
99
97
100
-
* To pass data from the **JS module to the query module**, you can pass parameters at runtime using `run()`, like `sign_in.run({ email: email, password: password })`.
101
-
102
-
* To read the **JS module data in the query module**, create **Inputs** with the same parameter name, like `email` and `password`.
103
-
98
+
*Example:*
104
99
105
100
```js
106
101
exportdefault {
107
-
signin: ({ email, password }) => {
108
-
// Call the sign_in API query with the provided email and password
// Remove the user information from the response data for security reasons
112
-
deletedata.user;
113
-
// Store each key-value pair from the response data in the local storage
114
-
Object.keys(data).forEach(i=> {
115
-
storeValue(i, data[i]);
116
-
});
117
-
})
118
-
.then(() =>
119
-
// Navigate to the 'Home' page upon successful authentication
120
-
navigateTo('Home')
121
-
);
102
+
asyncloginUser() {
103
+
if (!emailInput.text||!passwordInput.text) {
104
+
showAlert("Enter both email and password", "error");
105
+
return;
106
+
}
107
+
108
+
try {
109
+
constresponse=awaitlogin.run({
110
+
email:emailInput.text,
111
+
password:passwordInput.text
112
+
});
113
+
114
+
if (response.token) {
115
+
awaitstoreValue("access_token", response.token);
116
+
// Navigate to the 'Home' page upon successful authentication
117
+
navigateTo("Home");
118
+
} else {
119
+
showAlert("Login failed", "error");
120
+
}
121
+
} catch (e) {
122
+
showAlert("Invalid credentials", "error");
122
123
}
124
+
}
123
125
};
124
126
```
125
127
@@ -128,50 +130,59 @@ For any future user actions, use the stored access token to access the relevant
128
130
129
131
</dd>
130
132
133
+
4. Set the **onClick** event of the Login button to run the loginUser function defined in the JS Object.
131
134
132
-
4. Publish the package.
133
-
134
-
135
+
5. To dynamically change the login UI based on the app using the module, use inputs to pass data from the parent application into the module. This allows each app to control elements like the displayed app name and logo without modifying the module itself.
135
136
136
-
## Integrate custom authentication
137
+
<dd>
137
138
138
-
Follow these steps to use the login authentication module within your application:
139
+
*Example:* Create two inputs, `appName` and `logoUrl`, to reuse the same login module across different applications such as an HR portal or a CRM dashboard.
139
140
140
141
142
+
`appName`: Set the Text widget’s text property to: `{{ this.params.appName }}`
141
143
142
-
1. Open your **App** from the homepage and ensure that both the app and modules share the same workspace.
144
+
`logoUrl`: Set the Image widget’s source property to: `{{ this.params.logoUrl }}`
143
145
144
-
2. Create a simple login form using widgets such as Text and Input fields, tailored to meet your specific requirements.
146
+
</dd>
145
147
146
-
3. Select the JS tab on the Entity Explorer, add the **Login JS module**, and pass login form data into function parameters for authentication.
147
148
149
+
6. To pass login state or token ID from the module back to the parent app, use outputs. This allows you to expose specific values such as authentication tokens or login status that the parent application can access and respond to.
148
150
149
151
<dd>
150
152
153
+
*Example*: Create an output named `token` and pass the token ID received from the login API:
151
154
152
-
To pass data from the **App to a JS module**, you can set **Inputs** parameters or pass it by calling the respective function with parameters, like `login([email protected], password@123)`.
155
+
```js
156
+
//token
157
+
{{ authUtils.loginUser.data.token }}
158
+
```
153
159
160
+
The token can then be accessed in the parent app using `LoginModule1.outputs.token`.
4. Set the **onClick** event of the Submit/Login button to run the JS function.
165
+
166
+
7. Publish the package.
167
+
168
+
169
+
8. To integrate custom authentication into your app, open the application and navigate to the UI tab. Drag the login module onto the desired page and configure the appName and logoUrl inputs.
160
170
161
171
<dd>
162
172
173
+
Based on your application’s requirements, you can use the token output to store the login state, authorize API requests, or redirect users after successful authentication. To log out a user, call the revoke API to invalidate the access token, use the [clear store()](/reference/appsmith-framework/widget-actions/clear-store) action to remove stored user data, and redirect the user to the `LoginPage`.
163
174
164
175
165
-
When the button is clicked, the JS module verifies whether the user's email exists in the database. If the email and password match, it redirects the user to a new page.
176
+
</dd>
166
177
167
178
179
+
With this setup, the login module can now securely authenticate users, dynamically adapt to different applications, and expose login state back to the parent app. Once a user logs in successfully, they are automatically navigated to the home page or any other page you specify through input configuration.
168
180
169
181
182
+
If your application uses short-lived access tokens, consider implementing a refresh token strategy to maintain session continuity. For details on when and how to use refresh tokens, see the Refresh Token Handling Guide.
170
183
171
-
</dd>
172
184
173
185
174
-
To log out a user, call the revoke API to invalidate the access token, use the [clear store()](/reference/appsmith-framework/widget-actions/clear-store) action to remove stored user data, and redirect the user to the `LoginPage`.
0 commit comments