Integrating with no-code backend user authentication API
Open the downloaded source code in your favorite code editor. If you don't have one, we recommend Visual Studio Code.
Navigate to src/components/Account/Login.js.
![Login.js file in VS Code](/assets/image/tutorial/login_code_open.png)
Scroll down to the onSubmit function, where we will make a change.
const onSubmit = (e) => {
e.preventDefault()
if (!validate())
return
setLoading(true)
// ** INSERT AUTHENTICATION CODE HERE **
// *************************************
}
If you already don't have it open, go to Services, and open the 'TODOLISTS' service that we created earlier.
![Services page](/assets/image/tutorial/services_page.png)
Open the Users model, and switch to the Integration tab.
![Services page](/assets/image/tutorial/users_model_collapsed.png)
Click on Authenticate.
![Authenticate users section](/assets/image/tutorial/expand_authenticate_users.png)
Below the JavaScript code, click Copy JavaScript
![Copy to clipboard button](/assets/image/tutorial/copy_to_clipboard.png)
Go back to the file login.js, and paste the code where marked inside the onSubmit function.
const onSubmit = (e) => {
e.preventDefault()
if (!validate())
return
setLoading(true)
// ** INSERT AUTHENTICATION CODE HERE **
// ** INSERT AUTHENTICATION CODE ENDS **
}
const onSubmit = (e) => {
e.preventDefault()
if (!validate())
return
setLoading(true)
// ** INSERT AUTHENTICATION CODE HERE **
fetch("[YOUR LIGHTSWITCH API ENDPOINT]", {
headers: {
"Content-type": "application/json"
},
method: "POST",
body: JSON.stringify({
username: username,
password: password
})
})
.then(response => response.json())
.then(json => {
if (!json.success)
throw new Error(json.message)
/****** HANDLE RESPONSE ********
console.log(json.data.id)
*******************************/
})
.catch((error) => {
// handle error
alert(error.message)
})
// *************************************
}
Update the JSON body of the request to pass username and password input.
body: JSON.stringify({
"username": username,
"password": password
})
Update the code that handles the response back from the API to save the authentication token locally.
.then(json => {
// ***** UPDATED ***** //
// indicate that the action is complete
setLoading(false)
if (!json.success){
throw new Error(json.message)
}
// ***** UPDATED ***** //
// save token and move to the requested location or main page
auth.setToken(json.data.token)
navigate(from)
})
The final output should look something like this.
const onSubmit = (e) => {
e.preventDefault()
if (!validate())
return
setLoading(true)
// ** INSERT AUTHENTICATION CODE HERE **
fetch("[YOUR LIGHTSWITCH API ENDPOINT]", {
headers: {
"Content-type": "application/json"
},
method: "POST",
body: JSON.stringify({
username: username,
password: password
})
})
.then(response => response.json())
.then(json => {
// ***** UPDATED ***** //
// indicate that the action is complete
setLoading(false)
if (!json.success){
throw new Error(json.message)
}
// ***** UPDATED ***** //
// save token and move to the requested location or main page
auth.setToken(json.data.token)
navigate(from)
})
.catch((error) => {
// ***** UPDATED ***** //
// indicate that the action is complete
setLoading(false)
// handle error
alert(error.message)
});
}
Save your code. In the next step, we'll create an administrator account to test this code.