The twilio-next-template is a simple and efficient way to get started with Twilio's two-step text verification using the NextJS App Router and Twilio's API. It is primarily built with JavaScript (96.3%) and CSS (3.7%). This application was created to verify phone numbers for user sign-ups to mitigate spam. This project uses DaisyUI and Sonner (for toasts) for UI elements. It is developed and maintained by 9d8, a development studio by Cameron Youngblood and Bridger Tower.
To get started with the twilio-next-template:
-
Clone the repository to your local machine
-
Run the following commands:
npm i
-
Add a
.envfile with your own API keys from Twilio. To find Twilio API keys, navigate to the Twilio Console. You’ll be able to find your Account SID and Auth Token on the main dashboard of the console. Copy these values and paste them into your.envfile as the values for TWILIO_SID and TWILIO_AUTH_TOKEN respectively. You will also need to create a "verify service" in the Twilio console. Find the service ID of your Twilio service to paste into VERIFICATION_SID. Example names of theenvvariables are located in the.env.examplefile in the root directory of this repository. -
Next, run the following command:
npm run dev
Then open http://localhost:3000 with your browser to see the result.
The twilio-next-template application consists of the following primary directories:
app: Contains the main application code including:api/twilio/route.js: The API route for managing text code verification. Includes two route handlers forGETandPOSTrequests.globals.css: Contains the global CSS styles for the application.layout.js: Contains the layout components for the application.page.js: Contains the main page components for the application.
public: Contains static files used across the application, such as SVG files for visual elements.
This project is open for contributions. We look forward to seeing your ideas and improvements.
This project is licensed under the MIT License. See the LICENSE file in the repository root for more information.
For more information, check out the creators at 9d8.dev. Made by 9d8, a development studio by Cameron Youngblood and Bridger Tower.