Cursor/Windsurf
AI-assisted IDEs like Cursor and Windsurf are increasingly popular among developers for enhancing productivity. These tools offer LLM-based agents for code suggestions, debugging, and understanding codebases.
Now, you’ve created an innovative software project consisting of a frontend application and a backend server. By leveraging generative AI with the right prompts, you can integrate robust security features into your project within seconds.
Create a project and an application on Authgear
First, create an account and a project in the the Authgear portal.
In the project creation wizard, choose how your users will perform signup and login. For example:
By email with a password
By receiving OTP via SMS or WhatsApp
Next, navigate to the “Applications” page and create an application of the type Single Page Application.
There are two values you will need for the subsequent steps:
Client ID: An ID to identify your application application with Authgear
Endpoint: The URL to identify your Authgear project and allow your application to connect to it.
Under “Authorized Redirect URIs,” add the URL of your local environment with /auth-redirect
appended. For example, if your frontend application runs on port 4000, use: http://localhost:4000/auth-redirect
there.
Save your changes.
Add user login to frontend code
To integrate login functionality into your frontend code, follow the corresponding documentation based on your framework:
In the chat, select the documentation as context and put in the following prompt.
Use `@authgear/web` package, Integrate Authgear as Authentication provider
Store these in .env for initializing Authgear:
- Authgear Client ID is [CLIENT ID]
- Authgear Endpoint is [Authgear Endpoint]
- Redirect URL is http://localhost:4000/auth-redirect
To show the login status in the home page, use the following prompt to change the appearance of the logged in status and add a button to the pre-built user settings page.
When logged in, show user id (sub) in user info, a logout button and a User settings button in the Home page
User Settings page is opened by `authgear.open(Page.Settings);`
Run the SPA with this prompt to verify the result.
Run dev frontend server at port 4000
Add protection to backend code
In the backend, add the following documentation as context:
Validate JWT in your application server: https://docs.authgear.com/get-started/backend-api/jwt
In the backend, create a protected api `/me`,
When user access with a JWT access token issued by Authgear, return the user id, if not, return 401 unauthorized error
Run the backend server with this prompt to verify the result.
Run dev backend server at port 3000
Similarly you can prompt the chat to protect any API endpoints in the backend.
Protect the API calls in the frontend
Now you have the a protected API in the backend, add a button in the frontend to test it out.
Include the corresponding frontend SPA docs to the "context" added in the previous step. Then use the following prompt to add a button the test the API call:
In the frontend, show a button to test the protected api `/me` both before and after logout. Use the `authgear.fetch("URL")` to call the API.
Run both the frontend and backend servers simultaneously. Your frontend should now feature a button that calls the protected API. Logged-in users will see their user ID retrieved successfully, while logged-out users will encounter an error message.
Last updated
Was this helpful?