How to login a user using an email provider from the backend in Next.js with NextAuth? - next.js

I am building a Next.js application that uses NextAuth for authentication. On my landing page, I have an email input form that users can fill out and submit. When the user submits their email, they are redirected to a createOrSignIn page, and the email is added as a parameter to the URL.
On the createOrSignIn page, I have implemented a reCAPTCHA that verifies whether the user is a human. After the user is redirected, I extract the email from the URL and validate it. Then, I need to make an API request to my backend Next.js API to verify the reCAPTCHA token and sign in the user using email provider.
However, I am having trouble finding a solution to log in the user using the email provider from the backend.
Can anyone provide guidance on how to sign in a user using the email provider from the backend with NextAuth in Next.js?
Thank you in advance for any help you can provide!
I have tried several approaches to log in the user using the email provider from the backend with NextAuth in Next.js
What I expected to happen was to be able to log in the user using the email provider from the backend with NextAuth in Next.js without requiring the user to be redirected.
The flow I expect is as follows:
User fills out and submits the email input form on the landing page.
User is redirected to the createOrSignIn page, and the email is added as a parameter to the URL.
ReCAPTCHA v3 is displayed on the createOrSignIn page.
After validate email, a request is sent to the backend API to verify the reCAPTCHA token.
If the reCAPTCHA token is verified, the user is signed in using the NextAuth email provider, and a response is returned to indicate whether a verification email was sent to the user and whether the user exists or is new.
If the user is new, a new user form is displayed where the user can fill out their username.

Related

Firebase Authentication Provider for a User changed automatically to E-Mail. How to change back?

In a Firebase project, I have activated multiple sign-in methods (e-mail, Google, and Microsoft), which all work fine. I also have it activated to only allow one account per e-mail address.
The problem arises when a user successfully signs in via Google or Microsoft, then signs out and then signs in via e-mail, using the same e-mail address as before using Google or Microsoft. Then his account type changes to e-Mail and it seems like a no way back.
Is there a way to change user account types from e-mail back to Microsoft or Google?
Your code must have different functions written for different signin's. When the user first logs in, store his login method on firestore. You can get this from the signin function triggered or simply by the button user clicked. Then during each login add a check that if user exists and user's current signin method is not the same as the one stored on firestore, notify the user to use the correct one.
Or you can let the user signin using whatever they please but ultimately in your code, the function which is triggered will tell you the current signin method and you'd have the first/previous method stored. So you can do stuff accordingly.
What you are writing in question seams not how it works. When you sign in using Google provider your email is verified automatly and if you try to sign in using same email authentication will throw error that account with that email allredy exists.
If you created first account using email and password and didn't verify your email addres then if you sign in using google provider with same email address in it, email and password provider will gone because of was not verified and you wont be able to login using email end password unless you will setup a new password for this email.
If email was verified and you sign in using google provider with same email address. This provider will be added to providers array and you will be able to login using email and password and google provider.
To add multiple providers to your accaunt you can use linkWithPopup() function. If you created accound with diferent email address and want to be able to log in on this account with provider who has diferent email address for example.

Should you confirm email addresses obtained from external login providers?

I am working on a .NET application and I have set up an external login with facebook.
Currently, when the user uses the external login functionality, signs in to Facebook and my app recieves his email address, I create a new user account and consider the email address verified. (otherwise he could not login)
Is this a good practice though? Is it possible that some attacker would change the email address midway or something? What is the best practice for letting users sign in using external login providers?
Any help would be much appriciated, thanks.
Edit: In this tutorial the guy sends a confirmation email to the email address he recieves from the external login providers. However this seems impractical to me. It kind of defeats the purpuse of simplifying the log in/sign in process, moreover I don't think I was ever asked to confirm my email when I had used external login providers to log in myself.
Is it possible that some attacker would change the email address midway or something?
No, because you are using facebook which implements openid or oauth2.
In oauth2, mail and its password are safe because you do not manage them. Those are managed by your oauth2 provider (facebook in your case)
Also according to the oauth2 flow which is the same in google, facebook, linkedin, etc the provider don't send you the email. It sends you the authorization code:
use go to your web.com
user is redirected to https://www.facebook.com/v8.0/dialog/oauth?client_id={app_id}&redirect_uri={redirect_uri}
oauth2 provider prompts a login if user was not logged in previously
user accepts the consent form (next next)
oauth2 provider (facebook in your case) at the end, perform a final redirect to your web.com (using the callback url previously registered) sending the authorization code: https://web.com?code=196da272-083c
this code is required to generate the access_token and can be used just one time(another http invocation)
the access_token is required to get the email (another http invocation)
The only way to attack could be try to send fake authorization codes to https://web.com?code=**** but in the next step (exchange auth code for a new access_token), facebook will return you an error because the attacker cannot create real authorization codes.
Confirmation email
As you said, if your web allows the user to login with some social network, add a new step with email confirmation is impractical. Is more, facebook allows the use of phone number instead of mail.
But there are some scenarios (not in the authentication) in which mail could be your ally:
Offer an option for alert the user with something like this: Hi Bob, a new account was created with your social network... If you didn't, please click on the following...
confirm an email to be used in future notifications

Is there a way to reset password with Firebase Auth INSIDE a flutter app?

Firebase Auth has a method to send a verification email so the user can reset his/her password. This link redirects the user to a website where the new password will be written and saved.
Is there a way to reset a user's password using flutter and firebase inapp? I mean, could I send a verification code through SMS or email that would be then typed into the app and the user would choose a new password all inside the app?
Thank you!
To be able to change a user's password directly through the API, the user will have to enter their current password in order to be able to update it.
If you use the Admin SDK however you can implement whatever flow you want, and update the password at the end of the flow. But of course in that case it is up to you to ensure you do it securely.
You can do so by using custom email handlers along with dynamic links to open them in your app. This might require a custom domain to do so. Once the user visits your application on the custom route/page, you can then use applyActionCode method to process the email action. Checkout my answer here for a detailed explanation on processing the email actions:
How to build a custom Email action handler in Flutter for Firebase Authentication

How to link a logged in user to a Facebook Identity provider in Okta

I'm currently working on a project where we want to connect facebook profiles to existing (and logged in) Okta users.
The website is made in ASP.NET using Sitecore 6.5.
We use the "Authorize URL" to do our login and account linking with redirect callouts.
I can register and create an account with the facebook identity provider when the user isn't logged in in Okta. In this case it follows the Callout redirects and we get a tx_id. Hover when you're logged in to Okta and you visit the same "Athorize URL" it follows the redirect_uri where you get a id_token as result. this is an JWT string which I managed to decode (example result).
How can I use the information in the JWT to link a user to the identity provider? Or is there another way to do this? I can't find any methods or API calls to add a user to an identity provider without the tx_id.
I believe you used https://developer.okta.com/docs/api/resources/social_authentication.html to add FB social auth for users. Yes, once you browse the final url
https://example.okta.com/oauth2/v1/authorize?idp=0oa0bcde12fghiJkl3m4&client_id=AbcDE0fGHI1jk2LM34no&scope=openid%20email%20profile&response_type=id_token&response_mode=fragment&state=someState&nonce=someNonce&redirect_uri=https://app.example.com/social_auth
you will be redirected to your app https://app.example.com/social_auth with id token in the url. In the redirected app you can read, decode and create session for user. However, the same user profile is also created in Okta.
Once the social auth user profile is created in Okta, you can use that to get id token next time.

Using Windows Live Id Authentication with my own login form

I want to use the Windows Live Id Authenticaiton in my Asp.Net/MVC web application, but I do not want to use the Login screen provided by Microsoft.
I want to have my custom page for login, take username and password from User and then send these credentials to the Windows Live ID, to Authenticate, and I get back the response if the user is authenticated or not.
Is this possible?
I want to have my custom page for login, take username and password from User and then send these credentials to the Windows Live ID, to Authenticate, and I get back the response if the user is authenticated or not.
You missed the point of single sign-on authentication. Using that, the user does not provide their credentials to your site, but to the SSO provider. That provider gives you a token which lets you act on behalf of the authenticated user.
The user's credentials are never received by your site.
So no, you cannot, nor should you want to, do this.

Resources