How can i use node.js in adobe app builder
This is a simple structure of the Adobe App Builder app, how can I use node.js in it? For example, we created a client for frontend(react) and a server for the backend (node.js) in mern technology, here web src for the frontend part. I created a login component in the web src folder and created an action named register user which takes multiple nodes like name,phone_no, email, and password now I want to authenticate the user through the login page with the data available in register action How can I authenticate so that authorized people can access the home page. Can anyone provide the workflow structure of the document-related
this, as.
Hey @ShubhamAg2 , you are building a perfect SPA using AppBuilder. Here
- web-src - is the FE HEAD running on react
- actions - is the BE APIs that ll be called from your head.
Now when you create your runtime action, 2 configs you ll specify in your app.config.yaml
web: 'yes' - tells you are going to invoke this API from your react app
require-adobe-auth: false - tells (for now), you can freely hit this API without needing IMS auth. We ll change later, for dev start simple.
Next your login requirement will be handled at React FE. By default, on load of your first react component, you ll check if user is logged, by checking cookie / localstorage / sessionstorage, upto ur FE design. Lets assume you store `user-auth` object at localstorage that houses tokens, obfuscated email etc to tell user has logged in.
On load of first react component, you check if this `user-auth` object is present. If missing, you ll render the login component. Upon hitting register/login, you ll call the web-action url. Now this web-action has to be POST, not the default GET, which can be done using HTTP Context.
Something to remember, react components dont hook automatically into web actions. You should create custom hook / function and call the web-action url explicitly by passing payload into body.
Once the unsecured way of calling web-action works, make sure to secure your webaction with IMS token. So react app must first call IMS to fetch token and then invoke webaction. You can use IMS SDK @adobe/aio-lib-ims. I wrote a wrapper IMS token action that ll cache the token till ttl, that way token service is not expensive.
To put together, you create login action, upon submit at react component, you call login action, store the tokens and auth data into localstorage and allow access to homepage. Also keep your app stateless, meaning donot maintain any sessiontoken at nodeserver runtime action. runtime action should return payload for `user-auth` object that gets persisted on browser and rest becomes clientside handling. Hope this helps.
