{"id":405,"date":"2022-09-24T16:05:52","date_gmt":"2022-09-24T16:05:52","guid":{"rendered":"https:\/\/247blogs.com\/wp\/2022\/09\/24\/laravel-9-tutorial-laravel-9-firebase-phone-mobile-number-otp-auth-tutorial\/"},"modified":"2022-09-24T17:37:51","modified_gmt":"2022-09-24T17:37:51","slug":"laravel-9-tutorial-laravel-9-firebase-phone-mobile-number-otp-auth-tutorial","status":"publish","type":"post","link":"https:\/\/247blogs.com\/wp\/laravel-9-tutorial-laravel-9-firebase-phone-mobile-number-otp-auth-tutorial\/","title":{"rendered":"Laravel-9 Tutorial &#8211; Laravel 9 Firebase Phone\/Mobile Number OTP Auth Tutorial"},"content":{"rendered":"<div id=\"\">\n<p>Laravel Mobile number OTP authentication tutorial; Throughout this step-by-step tutorial, you will find out how to create Phone or mobile number OTP authentication in Laravel using the Firebase Phone sign-in auth provider.<\/p>\n<p>Firebase is a profound backend as a service tool, which makes the development work exorbitantly facile. To build the robust authentication system, it offers tons of ready-made features that you can implement in your app and amplify the development work.<\/p>\n<p>In this tutorial, we are integrating the Firebase phone and mobile OTP authentication in the Laravel app.<\/p>\n<p>To integrate Firebase mobile number OTP auth in Laravel app, you need to install a basic laravel app, connect it to the database, create a controller and bind it to the route.<\/p>\n<p>Lastly, create a simple view for sending mobile number otp through the Firebase ecosystem.<\/p>\n<p>So, without further ado, let us start implementing the firebase phone auth in the laravel app.<\/p>\n<h2>Laravel 9 Phone Number OTP Authentication using Firebase Example<\/h2>\n<ul>\n<li><strong>Step 1:<\/strong> Install Laravel App<\/li>\n<li><strong>Step 2:<\/strong> Create Firebase Project<\/li>\n<li><strong>Step 3:<\/strong> Enable Firebase Phone Auth<\/li>\n<li><strong>Step 4:<\/strong> Add Database Details<\/li>\n<li><strong>Step 5:<\/strong> Create Controller<\/li>\n<li><strong>Step 6:<\/strong> Add Route<\/li>\n<li><strong>Step 7:<\/strong> Set Up Blade View<\/li>\n<li><strong>Step 8:<\/strong> Start Development Server<\/li>\n<\/ul>\n<h2>Install Laravel App<\/h2>\n<p>You need to commence the fundamental step by installing a new laravel application using composer command, ensure to configure composer on the system, then execute the following command.<\/p>\n<pre class=\" language-markup\"><code class=\" language-bash\"><span class=\"token function\">composer<\/span> create-project --prefer-dist laravel\/laravel laravel-phone-otp-auth<\/code><\/pre>\n<h2>Create Firebase Project<\/h2>\n<p>Head over to <a href=\"http:\/\/console.firebase.google.com\" rel=\"noopener\" target=\"_blank\">Firebase site<\/a>, then signin using your firebase credentials, thereafter click on Create a project button.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.positronx.io\/wp-content\/uploads\/2021\/03\/12940-001-png-722%C3%97416-.jpg\" alt=\"Firebase\" width=\"1200\" height=\"691\" class=\"alignnone size-full wp-image-13742\" srcset=\"https:\/\/www.positronx.io\/wp-content\/uploads\/2021\/03\/12940-001-png-722\u00d7416-.jpg 1200w, https:\/\/www.positronx.io\/wp-content\/uploads\/2021\/03\/12940-001-png-722\u00d7416--768x442.jpg 768w, https:\/\/www.positronx.io\/wp-content\/uploads\/2021\/03\/12940-001-png-722\u00d7416--302x174.jpg 302w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\"><\/p>\n<p>Add project name, and click on continue.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.positronx.io\/wp-content\/uploads\/2021\/03\/12940-002-png-698%C3%97547-.png\" alt=\"Add firebase project\" width=\"1788\" height=\"1116\" class=\"alignnone size-full wp-image-13743\" srcset=\"https:\/\/www.positronx.io\/wp-content\/uploads\/2021\/03\/12940-002-png-698\u00d7547-.png 1788w, https:\/\/www.positronx.io\/wp-content\/uploads\/2021\/03\/12940-002-png-698\u00d7547--768x479.png 768w, https:\/\/www.positronx.io\/wp-content\/uploads\/2021\/03\/12940-002-png-698\u00d7547--1536x959.png 1536w, https:\/\/www.positronx.io\/wp-content\/uploads\/2021\/03\/12940-002-png-698\u00d7547--302x188.png 302w\" sizes=\"auto, (max-width: 1788px) 100vw, 1788px\"><\/p>\n<p>Next, add Firebase to your app, so to get credentials to click on the markup icon.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.positronx.io\/wp-content\/uploads\/2021\/03\/12940-0033-png-688%C3%97466-png-1928%C3%971236-.jpg\" alt=\"click on icon\" width=\"1200\" height=\"814\" class=\"alignnone size-full wp-image-13751\" srcset=\"https:\/\/www.positronx.io\/wp-content\/uploads\/2021\/03\/12940-0033-png-688\u00d7466-png-1928\u00d71236-.jpg 1200w, https:\/\/www.positronx.io\/wp-content\/uploads\/2021\/03\/12940-0033-png-688\u00d7466-png-1928\u00d71236--768x521.jpg 768w, https:\/\/www.positronx.io\/wp-content\/uploads\/2021\/03\/12940-0033-png-688\u00d7466-png-1928\u00d71236--302x205.jpg 302w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\"><\/p>\n<p>Next, you need to register app and click on Next.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.positronx.io\/wp-content\/uploads\/2021\/03\/12940-004-png-747%C3%97480-.png\" alt=\"register app\" width=\"1408\" height=\"1204\" class=\"alignnone size-full wp-image-13745\" srcset=\"https:\/\/www.positronx.io\/wp-content\/uploads\/2021\/03\/12940-004-png-747\u00d7480-.png 1408w, https:\/\/www.positronx.io\/wp-content\/uploads\/2021\/03\/12940-004-png-747\u00d7480--768x657.png 768w, https:\/\/www.positronx.io\/wp-content\/uploads\/2021\/03\/12940-004-png-747\u00d7480--246x210.png 246w\" sizes=\"auto, (max-width: 1408px) 100vw, 1408px\"><\/p>\n<p>From this page, you need to copy firebase configurations.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.positronx.io\/wp-content\/uploads\/2021\/03\/12940-0005-png-673%C3%97634-.jpg\" alt=\"firebase configurations\" width=\"1000\" height=\"1060\" class=\"alignnone size-full wp-image-13746\" srcset=\"https:\/\/www.positronx.io\/wp-content\/uploads\/2021\/03\/12940-0005-png-673\u00d7634-.jpg 1000w, https:\/\/www.positronx.io\/wp-content\/uploads\/2021\/03\/12940-0005-png-673\u00d7634--768x814.jpg 768w, https:\/\/www.positronx.io\/wp-content\/uploads\/2021\/03\/12940-0005-png-673\u00d7634--198x210.jpg 198w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\"><\/p>\n<h2>Enable Firebase Phone Auth<\/h2>\n<p>The Firebase project has been created. Now you have to enable the firebase phone authentication, click on the authentication tab, head over to the Sign-in method section, click on the Phone item and enable the Phone auth.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.positronx.io\/wp-content\/uploads\/2021\/03\/12940-006.png\" alt=\"Enable Phone Auth in Firebase \" width=\"2192\" height=\"1408\" class=\"alignnone size-full wp-image-13747\" srcset=\"https:\/\/www.positronx.io\/wp-content\/uploads\/2021\/03\/12940-006.png 2192w, https:\/\/www.positronx.io\/wp-content\/uploads\/2021\/03\/12940-006-768x493.png 768w, https:\/\/www.positronx.io\/wp-content\/uploads\/2021\/03\/12940-006-1536x987.png 1536w, https:\/\/www.positronx.io\/wp-content\/uploads\/2021\/03\/12940-006-2048x1316.png 2048w, https:\/\/www.positronx.io\/wp-content\/uploads\/2021\/03\/12940-006-302x194.png 302w\" sizes=\"auto, (max-width: 2192px) 100vw, 2192px\"><\/p>\n<h2>Add Database Details in ENV<\/h2>\n<p>Add database name, user name, and password into the <strong>.env<\/strong> file:<\/p>\n<pre class=\" language-markup\"><code class=\"  language-bash\"><span class=\"token assign-left variable\">DB_CONNECTION<\/span><span class=\"token operator\">=<\/span>mysql\n<span class=\"token assign-left variable\">DB_HOST<\/span><span class=\"token operator\">=<\/span>localhost\n<span class=\"token assign-left variable\">DB_PORT<\/span><span class=\"token operator\">=<\/span><span class=\"token number\">3306<\/span>\n<span class=\"token assign-left variable\">DB_DATABASE<\/span><span class=\"token operator\">=<\/span>database_px\n<span class=\"token assign-left variable\">DB_USERNAME<\/span><span class=\"token operator\">=<\/span>root\n<span class=\"token assign-left variable\">DB_PASSWORD<\/span><span class=\"token operator\">=<\/span><\/code><\/pre>\n<p>If you are using MAMP local server in macOs; make sure to append UNIX_SOCKET and DB_SOCKET below database credentials in <strong>.env <\/strong>file.<\/p>\n<pre class=\"language-bash\" tabindex=\"0\"><code class=\"language-bash\"><span class=\"token assign-left variable\">UNIX_SOCKET<\/span><span class=\"token operator\">=<\/span>\/Applications\/MAMP\/tmp\/mysql\/mysql.sock\n<span class=\"token assign-left variable\">DB_SOCKET<\/span><span class=\"token operator\">=<\/span>\/Applications\/MAMP\/tmp\/mysql\/mysql.sock<\/code><\/pre>\n<h2>Create Controller<\/h2>\n<p>Open terminal, type command, then execute the command that generates a new controller; in this controller we will call the blade view for showing the mobile otp auth form.<\/p>\n<pre class=\" language-markup\"><code class=\"  language-bash\">php artisan make:controller PhoneAuthController<\/code><\/pre>\n<p>Open and add code in <strong>app\/http\/controllers\/PhoneAuthController.php<\/strong> file:<\/p>\n<pre class=\" language-markup\"><code class=\" language-php\"><span class=\"token php language-php\"><span class=\"token delimiter important\"><?php<\/span>\n<span class=\"token keyword\">namespace<\/span> <span class=\"token package\">App<span class=\"token punctuation\"><\/span>Http<span class=\"token punctuation\"><\/span>Controllers<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">use<\/span> <span class=\"token package\">Illuminate<span class=\"token punctuation\"><\/span>Http<span class=\"token punctuation\"><\/span>Request<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name-definition class-name\">PhoneAuthController<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Controller<\/span>\n<span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">public<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">index<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">{<\/span>\n      <span class=\"token keyword\">return<\/span> <span class=\"token function\">view<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string single-quoted-string\">'welcome'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span>\n<span class=\"token punctuation\">}<\/span><\/span><\/code><\/pre>\n<h2>Add Route<\/h2>\n<p>Open and create a new route by using the PhoneAuthController, add the following code in <strong>routes\/web.php<\/strong>:<\/p>\n<pre class=\" language-markup\"><code class=\"  language-php\"><span class=\"token php language-php\"><span class=\"token delimiter important\"><?php<\/span>\n<span class=\"token keyword\">use<\/span> <span class=\"token package\">Illuminate<span class=\"token punctuation\"><\/span>Support<span class=\"token punctuation\"><\/span>Facades<span class=\"token punctuation\"><\/span>Route<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">use<\/span> <span class=\"token package\">App<span class=\"token punctuation\"><\/span>Http<span class=\"token punctuation\"><\/span>Controllers<span class=\"token punctuation\"><\/span>PhoneAuthController<\/span><span class=\"token punctuation\">;<\/span>\n\n\n<span class=\"token class-name static-context\">Route<\/span><span class=\"token operator\">::<\/span><span class=\"token function\">get<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string single-quoted-string\">'phone-auth'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token class-name static-context\">PhoneAuthController<\/span><span class=\"token operator\">::<\/span><span class=\"token keyword\">class<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string single-quoted-string\">'index'<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><\/code><\/pre>\n<h2>Set Up Blade View<\/h2>\n<p>We are using the default welcome blade view file to create the auth form\u2019s locus, add bootstrap 5, firebase, and jQuery scripts in this template, add some custom functions that handle the phone auth in firebase.<\/p>\n<p>Open and replace with the following code in <strong>resources\/views\/welcome.blade.php<\/strong>:<\/p>\n<pre class=\" language-markup\" tabindex=\"0\"><code class=\"  language-php\"><span class=\"token operator\"><<\/span><span class=\"token operator\">!<\/span><span class=\"token constant\">DOCTYPE<\/span> html<span class=\"token operator\">><\/span>\n<span class=\"token operator\"><<\/span>html lang<span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"{{ str_replace('_', '-', app()->getLocale()) }}\"<\/span><span class=\"token operator\">><\/span>\n<span class=\"token operator\"><<\/span>head<span class=\"token operator\">><\/span>\n    <span class=\"token operator\"><<\/span>meta charset<span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"utf-8\"<\/span><span class=\"token operator\">><\/span>\n    <span class=\"token operator\"><<\/span>meta name<span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"viewport\"<\/span> content<span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"width=device-width, initial-scale=1\"<\/span><span class=\"token operator\">><\/span>\n    <span class=\"token operator\"><<\/span>title<span class=\"token operator\">><\/span>Laravel <span class=\"token number\">8<\/span> Phone Number <span class=\"token constant\">OTP<\/span> Auth Example<span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>title<span class=\"token operator\">><\/span>\n    <span class=\"token operator\"><<\/span>link href<span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.0-beta2\/dist\/css\/bootstrap.min.css\"<\/span> rel<span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"stylesheet\"<\/span><span class=\"token operator\">><\/span>\n<span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>head<span class=\"token operator\">><\/span>\n<span class=\"token operator\"><<\/span>body<span class=\"token operator\">><\/span>\n    <span class=\"token operator\"><<\/span>div <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"container mt-5\"<\/span> style<span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"max-width: 550px\"<\/span><span class=\"token operator\">><\/span>\n        <span class=\"token operator\"><<\/span>div <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"alert alert-danger\"<\/span> id<span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"error\"<\/span> style<span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"display: none;\"<\/span><span class=\"token operator\">><\/span><span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">><\/span>\n        <span class=\"token operator\"><<\/span>h3<span class=\"token operator\">><\/span>Add Phone Number<span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>h3<span class=\"token operator\">><\/span>\n        <span class=\"token operator\"><<\/span>div <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"alert alert-success\"<\/span> id<span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"successAuth\"<\/span> style<span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"display: none;\"<\/span><span class=\"token operator\">><\/span><span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">><\/span>\n        <span class=\"token operator\"><<\/span>form<span class=\"token operator\">><\/span>\n            <span class=\"token operator\"><<\/span>label<span class=\"token operator\">><\/span>Phone Number<span class=\"token punctuation\">:<\/span><span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>label<span class=\"token operator\">><\/span>\n            <span class=\"token operator\"><<\/span>input type<span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"text\"<\/span> id<span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"number\"<\/span> <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"form-control\"<\/span> placeholder<span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"+91 ********\"<\/span><span class=\"token operator\">><\/span>\n            <span class=\"token operator\"><<\/span>div id<span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"recaptcha-container\"<\/span><span class=\"token operator\">><\/span><span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">><\/span>\n            <span class=\"token operator\"><<\/span>button type<span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"button\"<\/span> <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"btn btn-primary mt-3\"<\/span> onclick<span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"sendOTP();\"<\/span><span class=\"token operator\">><\/span>Send <span class=\"token constant\">OTP<\/span><span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>button<span class=\"token operator\">><\/span>\n        <span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>form<span class=\"token operator\">><\/span>\n\n        <span class=\"token operator\"><<\/span>div <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"mb-5 mt-5\"<\/span><span class=\"token operator\">><\/span>\n            <span class=\"token operator\"><<\/span>h3<span class=\"token operator\">><\/span>Add verification code<span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>h3<span class=\"token operator\">><\/span>\n            <span class=\"token operator\"><<\/span>div <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"alert alert-success\"<\/span> id<span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"successOtpAuth\"<\/span> style<span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"display: none;\"<\/span><span class=\"token operator\">><\/span><span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">><\/span>\n            <span class=\"token operator\"><<\/span>form<span class=\"token operator\">><\/span>\n                <span class=\"token operator\"><<\/span>input type<span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"text\"<\/span> id<span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"verification\"<\/span> <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"form-control\"<\/span> placeholder<span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"Verification code\"<\/span><span class=\"token operator\">><\/span>\n                <span class=\"token operator\"><<\/span>button type<span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"button\"<\/span> <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"btn btn-danger mt-3\"<\/span> onclick<span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"verify()\"<\/span><span class=\"token operator\">><\/span>Verify code<span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>button<span class=\"token operator\">><\/span>\n            <span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>form<span class=\"token operator\">><\/span>\n        <span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">><\/span>\n    <span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">><\/span>\n    <span class=\"token operator\"><<\/span>script src<span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.6.0\/jquery.min.js\"<\/span><span class=\"token operator\">><\/span><span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>script<span class=\"token operator\">><\/span>\n    <span class=\"token operator\"><<\/span><span class=\"token operator\">!<\/span><span class=\"token operator\">--<\/span> Firebase <span class=\"token function\">App<\/span> <span class=\"token punctuation\">(<\/span>the core Firebase <span class=\"token constant\">SDK<\/span><span class=\"token punctuation\">)<\/span> is always required <span class=\"token keyword\">and<\/span> must be listed first <span class=\"token operator\">--<\/span><span class=\"token operator\">><\/span>\n    <span class=\"token operator\"><<\/span>script src<span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"https:\/\/www.gstatic.com\/firebasejs\/6.0.2\/firebase.js\"<\/span><span class=\"token operator\">><\/span><span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>script<span class=\"token operator\">><\/span>\n\n    <span class=\"token operator\"><<\/span>script<span class=\"token operator\">><\/span>\n        <span class=\"token keyword\">var<\/span> firebaseConfig <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span>\n            apiKey<span class=\"token punctuation\">:<\/span> <span class=\"token string double-quoted-string\">\"API_KEY\"<\/span><span class=\"token punctuation\">,<\/span>\n            <span class=\"token argument-name\">authDomain<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token string double-quoted-string\">\"PROJECT_ID.firebaseapp.com\"<\/span><span class=\"token punctuation\">,<\/span>\n            <span class=\"token argument-name\">databaseURL<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token string double-quoted-string\">\"https:\/\/PROJECT_ID.firebaseio.com\"<\/span><span class=\"token punctuation\">,<\/span>\n            <span class=\"token argument-name\">projectId<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token string double-quoted-string\">\"PROJECT_ID\"<\/span><span class=\"token punctuation\">,<\/span>\n            <span class=\"token argument-name\">storageBucket<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token string double-quoted-string\">\"PROJECT_ID.appspot.com\"<\/span><span class=\"token punctuation\">,<\/span>\n            <span class=\"token argument-name\">messagingSenderId<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token string double-quoted-string\">\"SENDER_ID\"<\/span><span class=\"token punctuation\">,<\/span>\n            <span class=\"token argument-name\">appId<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token string double-quoted-string\">\"APP_ID\"<\/span>\n        <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\n        firebase<span class=\"token operator\">.<\/span><span class=\"token function\">initializeApp<\/span><span class=\"token punctuation\">(<\/span>firebaseConfig<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>script<span class=\"token operator\">><\/span>\n    <span class=\"token operator\"><<\/span>script type<span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"text\/javascript\"<\/span><span class=\"token operator\">><\/span>\n        window<span class=\"token operator\">.<\/span>onload <span class=\"token operator\">=<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n            <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n        <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\n        <span class=\"token keyword\">function<\/span> <span class=\"token function-definition function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n            window<span class=\"token operator\">.<\/span>recaptchaVerifier <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">firebase<\/span><span class=\"token operator\">.<\/span>auth<span class=\"token operator\">.<\/span><span class=\"token function\">RecaptchaVerifier<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string single-quoted-string\">'recaptcha-container'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n            recaptchaVerifier<span class=\"token operator\">.<\/span><span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n        <span class=\"token punctuation\">}<\/span>\n        <span class=\"token keyword\">function<\/span> <span class=\"token function-definition function\">sendOTP<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n            <span class=\"token keyword\">var<\/span> number <span class=\"token operator\">=<\/span> $<span class=\"token punctuation\">(<\/span><span class=\"token string double-quoted-string\">\"#number\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token operator\">.<\/span><span class=\"token function\">val<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n            firebase<span class=\"token operator\">.<\/span><span class=\"token function\">auth<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token operator\">.<\/span><span class=\"token function\">signInWithPhoneNumber<\/span><span class=\"token punctuation\">(<\/span>number<span class=\"token punctuation\">,<\/span> window<span class=\"token operator\">.<\/span>recaptchaVerifier<span class=\"token punctuation\">)<\/span><span class=\"token operator\">.<\/span><span class=\"token function\">then<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">function<\/span> <span class=\"token punctuation\">(<\/span>confirmationResult<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n                window<span class=\"token operator\">.<\/span>confirmationResult <span class=\"token operator\">=<\/span> confirmationResult<span class=\"token punctuation\">;<\/span>\n                coderesult <span class=\"token operator\">=<\/span> confirmationResult<span class=\"token punctuation\">;<\/span>\n                console<span class=\"token operator\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span>coderesult<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n                $<span class=\"token punctuation\">(<\/span><span class=\"token string double-quoted-string\">\"#successAuth\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token operator\">.<\/span><span class=\"token function\">text<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string double-quoted-string\">\"Message sent\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n                $<span class=\"token punctuation\">(<\/span><span class=\"token string double-quoted-string\">\"#successAuth\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token operator\">.<\/span><span class=\"token function\">show<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n            <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token operator\">.<\/span><span class=\"token keyword\">catch<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">function<\/span> <span class=\"token punctuation\">(<\/span>error<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n                $<span class=\"token punctuation\">(<\/span><span class=\"token string double-quoted-string\">\"#error\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token operator\">.<\/span><span class=\"token function\">text<\/span><span class=\"token punctuation\">(<\/span>error<span class=\"token operator\">.<\/span>message<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n                $<span class=\"token punctuation\">(<\/span><span class=\"token string double-quoted-string\">\"#error\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token operator\">.<\/span><span class=\"token function\">show<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n            <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n        <span class=\"token punctuation\">}<\/span>\n        <span class=\"token keyword\">function<\/span> <span class=\"token function-definition function\">verify<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n            <span class=\"token keyword\">var<\/span> code <span class=\"token operator\">=<\/span> $<span class=\"token punctuation\">(<\/span><span class=\"token string double-quoted-string\">\"#verification\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token operator\">.<\/span><span class=\"token function\">val<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n            coderesult<span class=\"token operator\">.<\/span><span class=\"token function\">confirm<\/span><span class=\"token punctuation\">(<\/span>code<span class=\"token punctuation\">)<\/span><span class=\"token operator\">.<\/span><span class=\"token function\">then<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">function<\/span> <span class=\"token punctuation\">(<\/span>result<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n                <span class=\"token keyword\">var<\/span> user <span class=\"token operator\">=<\/span> result<span class=\"token operator\">.<\/span>user<span class=\"token punctuation\">;<\/span>\n                console<span class=\"token operator\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span>user<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n                $<span class=\"token punctuation\">(<\/span><span class=\"token string double-quoted-string\">\"#successOtpAuth\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token operator\">.<\/span><span class=\"token function\">text<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string double-quoted-string\">\"Auth is successful\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n                $<span class=\"token punctuation\">(<\/span><span class=\"token string double-quoted-string\">\"#successOtpAuth\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token operator\">.<\/span><span class=\"token function\">show<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n            <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token operator\">.<\/span><span class=\"token keyword\">catch<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">function<\/span> <span class=\"token punctuation\">(<\/span>error<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n                $<span class=\"token punctuation\">(<\/span><span class=\"token string double-quoted-string\">\"#error\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token operator\">.<\/span><span class=\"token function\">text<\/span><span class=\"token punctuation\">(<\/span>error<span class=\"token operator\">.<\/span>message<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n                $<span class=\"token punctuation\">(<\/span><span class=\"token string double-quoted-string\">\"#error\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token operator\">.<\/span><span class=\"token function\">show<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n            <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n        <span class=\"token punctuation\">}<\/span>\n    <span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>script<span class=\"token operator\">><\/span>\n<span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>body<span class=\"token operator\">><\/span>\n<span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>html<span class=\"token operator\">><\/span><\/code><\/pre>\n<h2>Start Development Server<\/h2>\n<p>You may quickly test the application; just type the suggested command on the terminal, execute it start the development server.<\/p>\n<pre class=\" language-markup\"><code class=\" language-bash\">php artisan serve<\/code><\/pre>\n<p>Use the following url to send the otp to authenticate using the phone number via firebase.<\/p>\n<pre class=\" language-markup\"><code class=\"  language-bash\">http:\/\/127.0.0.1:8000\/phone-auth<\/code><\/pre>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.positronx.io\/wp-content\/uploads\/2021\/03\/12940-01.jpg\" alt=\"Laravel Phone Number OTP Authentication using Firebase\" width=\"1000\" height=\"774\" class=\"alignnone size-full wp-image-13739\" srcset=\"https:\/\/www.positronx.io\/wp-content\/uploads\/2021\/03\/12940-01.jpg 1000w, https:\/\/www.positronx.io\/wp-content\/uploads\/2021\/03\/12940-01-768x594.jpg 768w, https:\/\/www.positronx.io\/wp-content\/uploads\/2021\/03\/12940-01-271x210.jpg 271w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\"><\/p>\n<h2>Conclusion<\/h2>\n<p>We have explained how to authenticate with mobile number OTP in Laravel with Firebase. It is easy to add firebase authentication to login into a user by sending a one-time SMS message to the user\u2019s mobile number.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Laravel Mobile number OTP authentication tutorial; Throughout this step-by-step tutorial, you will find out how to create Phone or mobile number OTP authentication in Laravel using the Firebase Phone sign-in [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":406,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19,14],"tags":[],"class_list":["post-405","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-laravel","category-tutorial","clearfix"],"_links":{"self":[{"href":"https:\/\/247blogs.com\/wp\/wp-json\/wp\/v2\/posts\/405","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/247blogs.com\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/247blogs.com\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/247blogs.com\/wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/247blogs.com\/wp\/wp-json\/wp\/v2\/comments?post=405"}],"version-history":[{"count":1,"href":"https:\/\/247blogs.com\/wp\/wp-json\/wp\/v2\/posts\/405\/revisions"}],"predecessor-version":[{"id":670,"href":"https:\/\/247blogs.com\/wp\/wp-json\/wp\/v2\/posts\/405\/revisions\/670"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/247blogs.com\/wp\/wp-json\/wp\/v2\/media\/406"}],"wp:attachment":[{"href":"https:\/\/247blogs.com\/wp\/wp-json\/wp\/v2\/media?parent=405"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/247blogs.com\/wp\/wp-json\/wp\/v2\/categories?post=405"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/247blogs.com\/wp\/wp-json\/wp\/v2\/tags?post=405"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}