{"id":169,"date":"2025-04-03T08:39:50","date_gmt":"2025-04-03T08:39:50","guid":{"rendered":"https:\/\/documentation.iqonic.design\/streamit-laravel\/?p=169"},"modified":"2025-12-08T11:17:03","modified_gmt":"2025-12-08T11:17:03","slug":"how-to-otp-login-setup","status":"publish","type":"post","link":"https:\/\/documentation.iqonic.design\/streamit-laravel\/how-to-otp-login-setup\/","title":{"rendered":"How to OTP login setup?"},"content":{"rendered":"<div class=\"nolwrap\">\n<p>Steps to Retrieve Firebase Credentials for OTP Login<\/p>\n\n\n\n<p><strong>1.Create a Firebase Project<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go to the&nbsp;<a href=\"https:\/\/console.firebase.google.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Firebase Console<\/a>.<\/li>\n\n\n\n<li>Log in with your Google account.<\/li>\n\n\n\n<li>Click on &#8216;Add Project&#8217; or select an existing project.<\/li>\n\n\n\n<li><\/li>\n<\/ul>\n\n\n\n<p><strong>2. Add an App to Your Firebase Project<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In the Firebase project dashboard, click on the gear icon \u2699\ufe0f in the sidebar and go to&nbsp;<strong>Project Settings<\/strong>.<\/li>\n\n\n\n<li>Scroll to the&nbsp;<strong>Your apps<\/strong>&nbsp;section and click on the &#8216;Add app&#8217; button.<\/li>\n\n\n\n<li>Select your platform (e.g., Web) and register the app.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1505\" height=\"589\" src=\"https:\/\/documentation.iqonic.design\/streamit-laravel\/wp-content\/uploads\/sites\/5\/2025\/04\/image-22.png\" alt=\"\" class=\"wp-image-1385\" \/><\/figure>\n\n\n\n<p><strong>3. Retrieve the Configuration Object<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>After registering the app, Firebase will provide you with a configuration object.<\/li>\n\n\n\n<li>It will look something like this:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">const firebaseConfig = {<br>  apiKey: 'your-api-key',<br>  authDomain: 'your-auth-domain.firebaseapp.com',<br>  databaseURL: 'https:\/\/your-database-name.firebaseio.com',<br>  projectId: 'your-project-id',<br>  storageBucket: 'your-storage-bucket.appspot.com',<br>  messagingSenderId: 'your-messaging-sender-id',<br>  appId: 'your-app-id',<br>  measurementId: 'your-measurement-id'<br>};<\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Copy this configuration and save it for your use.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1293\" height=\"751\" src=\"https:\/\/documentation.iqonic.design\/streamit-laravel\/wp-content\/uploads\/sites\/5\/2025\/04\/image-23.png\" alt=\"\" class=\"wp-image-1387\" \/><\/figure>\n\n\n\n<p><strong>4. Enable Phone Authentication<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go to the Firebase Console and navigate to&nbsp;<strong>Build &gt; Authentication &gt; Sign-in method<\/strong>.<\/li>\n\n\n\n<li>Enable&nbsp;<strong>Phone<\/strong>&nbsp;as a sign-in provider.<\/li>\n<\/ul>\n\n\n\n<p><strong>5. Set Up OTP Login<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use Firebase&#8217;s&nbsp;<a href=\"https:\/\/firebase.google.com\/docs\/auth\/web\/phone-auth\" target=\"_blank\" rel=\"noreferrer noopener\">Phone Authentication<\/a>&nbsp;to implement OTP login in your application.<\/li>\n<\/ul>\n\n\n\n<p><strong>Note:<\/strong><br>If you want this flow to work on the web, you will need to open this link:<br><a href=\"https:\/\/cloud.google.com\/identity-platform\/pricing\" target=\"_blank\" rel=\"noopener\">https:\/\/cloud.google.com\/identity-platform\/pricing<\/a> <\/p>\n\n\n\n<p>From the pricing table, purchase the plan that fits your requirement. Only after activating the plan will the flow start working on the web.<\/p>\n\n\n\n<div class=\"wp-block-cover\"><img loading=\"lazy\" decoding=\"async\" width=\"1593\" height=\"726\" class=\"wp-block-cover__image-background wp-image-1384\" alt=\"\" src=\"https:\/\/documentation.iqonic.design\/streamit-laravel\/wp-content\/uploads\/sites\/5\/2025\/04\/image-21.png\" data-object-fit=\"cover\" \/><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim\"><\/span><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<p class=\"has-text-align-center has-large-font-size\"><\/p>\n<\/div><\/div>\n\n\n\n<p>To enable the OTP feature, you must first <strong>create a Firebase project for the web<\/strong> and then <strong>purchase a plan<\/strong> from the link above (based on your requirement). Only <strong>after purchasing the plan<\/strong> will the OTP feature work.<\/p>\n\n\n\n<p>For the <strong>mobile app<\/strong>, it might be working because some <strong>free limits<\/strong> are available. But if you <strong>purchase the plan<\/strong>, the OTP feature will work <strong>properly and reliably<\/strong> in the app as well.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Steps to Retrieve Firebase Credentials for OTP Login 1.Create a Firebase Project: 2. Add an App to Your Firebase Project: 3. Retrieve the Configuration Object: const firebaseConfig = { apiKey: &#8216;your-api-key&#8217;, authDomain: &#8216;your-auth-domain.firebaseapp.com&#8217;, databaseURL: &#8216;https:\/\/your-database-name.firebaseio.com&#8217;, projectId: &#8216;your-project-id&#8217;, storageBucket: &#8216;your-storage-bucket.appspot.com&#8217;, messagingSenderId: &#8216;your-messaging-sender-id&#8217;, appId: &#8216;your-app-id&#8217;, measurementId: &#8216;your-measurement-id&#8217;}; 4. Enable Phone Authentication: 5. Set Up OTP Login: Note:If [&hellip;]<\/p>\n","protected":false},"author":11,"featured_media":0,"parent":165,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-169","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"featured_image_src":null,"author_info":{"display_name":"laraveladminiq","author_link":"https:\/\/documentation.iqonic.design\/streamit-laravel\/author\/laraveladminiq\/"},"children":[],"_links":{"self":[{"href":"https:\/\/documentation.iqonic.design\/streamit-laravel\/wp-json\/wp\/v2\/posts\/169","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/documentation.iqonic.design\/streamit-laravel\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/documentation.iqonic.design\/streamit-laravel\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/documentation.iqonic.design\/streamit-laravel\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/documentation.iqonic.design\/streamit-laravel\/wp-json\/wp\/v2\/comments?post=169"}],"version-history":[{"count":8,"href":"https:\/\/documentation.iqonic.design\/streamit-laravel\/wp-json\/wp\/v2\/posts\/169\/revisions"}],"predecessor-version":[{"id":1390,"href":"https:\/\/documentation.iqonic.design\/streamit-laravel\/wp-json\/wp\/v2\/posts\/169\/revisions\/1390"}],"up":[{"embeddable":true,"href":"https:\/\/documentation.iqonic.design\/streamit-laravel\/wp-json\/wp\/v2\/posts\/165"}],"wp:attachment":[{"href":"https:\/\/documentation.iqonic.design\/streamit-laravel\/wp-json\/wp\/v2\/media?parent=169"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/documentation.iqonic.design\/streamit-laravel\/wp-json\/wp\/v2\/categories?post=169"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/documentation.iqonic.design\/streamit-laravel\/wp-json\/wp\/v2\/tags?post=169"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}