How to link accounts via API using the Auth0.js SDK in react - reactjs

I am trying to set up a working example of linking accounts to my sample app. I am currently using the react example found here as my base. I have looked over the docs and the example of linking an account with Lock, but I'm not sure how to apply that to the react example I am working with. I have also looked at the API for linking a user account here.
Here are the use cases I am trying to work around:
There would be a user who creates a new account on my site using Google. Then they decide they want to add another social login via GitHub to that same account. They clicks a button that allows them to login via GitHub and then it redirects back to their account page and they can now login to the one account with either their Google login or GitHub.
There would be a user who creates a new account on my site using Google. Another day they create another new account on my site using GitHub. Later they realize that they mistakenly made two accounts and want to merge them. They login to either account then click a button that allows them to login to the other account and then they are redirected back to their now merged account.
I think the API would be my best option, but I'm not sure how to obtain the SECONDARY_ACCOUNT_JWT OR THE SECONDARY_ACCOUNT_USER_ID. How do I get the user to log in to their other account? When I try to redirect to the login page when a user is already logged in it just redirects back to the page I have set to redirect after login.

Hey there Camiblanch!
You could link the accounts together if they share the same email through a rule. Attached is an example that may help you in your quest. Thanks!
https://auth0.com/rules/link-users-by-email

Related

How to show the profile image/photo of a user in Teams tab?

Problem
In our Teams app tab we want to show the profile image/photo of the current user.
Things we tried
The user is authenticated with Single Sign-on for tabs and we store some user information to track some progress in our app. It is not possible to fetch the profile image from the Microsoft Graph API with the token from the Single Sign-On process — the User.Read permission is missing.
The user profile image does not seem to be available in the Teams context from the Microsoft Teams Javascript SDK.
In SharePoint it is possible to show the profile image of the current user with a special URL: https://<tenant>.sharepoint.com/_layouts/15/userphoto.aspx?size=L&accountname=<upn>. This fails in Teams with an "no access" redirect if the user has not logged in into SharePoint.
Seemingly possible solutions
Extra authentication step to get the User.Read permission; not ideal, nobody is gonna press a extra button just so we can show a profile image.
Convince the Single Sign-on for tabs process to include User.Read; Adding the permission in all kinds of configuration did not change anything in the resulting token.
Use a custom OAuth2 flow, according to this blog post it is possible to setup in the Single Sign-On for bots process. The Teams SDK does not seem to have the same possiblility.
Somehow make sure a user is authenticated in SharePoint so we can use the magic profile image URL; does not seem very likely.
Is there a solution workaround and/or something that we did not try yet for this problem?
You won't be able to modify what the standard SSO does, unfortunately.
The easiest way to deal with this is to use the Microsoft Graph Toolkit, specifically the Person component. It's exactly built for this kind of scenario, and you have the user's AadObjectId from the Teams context.
It does require an Azure Application, but I think you can use the same app. It -will- prompt the user, by default, with a consent popup, but you can get around this, as always, with an admin consenting on behalf of the user.

Microsoft Authentication Library SPA versus a Web App

TLDR: Which is the correct way to check for login states across multiple web pages, a SPA or a Web App.
I'm looking to develop an internal staff website for a company I'm working with. We currently have a SPA configured and developed and working properly but as we are adding more features I'm thinking that we are going to need more than one single page.
Correct me if I'm wrong, but this is my current understanding of MSAL.js with SPAs. Let's say a end-user is attempting to access our staff page at [company].com/home, if the user has not authenticated with their account that is stored in our Azure AD, the end-user can authenticate only for that page and their session state can be stored in the local storage, so when they access [company].com/home, their login can be acquired silently and the end-user will not have to log in again. If they do not have an account, they will not be able to access any page.
Also, by this logic, if the end-user accesses [company].com/staffresources, they will have to also login for this page as well, in addition to the cached login for [company].com/home, and the same will follow for each page throughout the website. At least, that is my understanding, correct?
I do see that there is an option for a Web App, would this solve the issue to where the end-user would have to authenticate each seperate page that they attempt to connect to? Or is there a way to check for a login state using a SPA, if the user has not been authenticated, they are can be redirected to a [company].com/login.
Any direct links to proper documentation for a solution would also be greatly appreciated.
localstorage is segmented by domain, not by each individual page. If a user signs in with msal.js on [company].com/login they will be signed on every page under the [company].com domain.

What is an ideal login workflow along with Facebook's OAuth2?

So today, I tried playing with Facebook's OAuth2 in my AngularJS application. I was able to make an activity work by clicking a Like button in my app. I'm also able to check if I'm logged in to Facebook using FB.getLoginStatus(). So my question is, if we currently have a login page, what is the ideal user experience when combining it with Facebook?
Do you display Facebook login page then goes back to your original login(this is what is happening on my application right now)
Do you display Facebook login page then once you've been logged in, bypass your original login page and allow the app to bring you directly to the main application. But how do I find out the facebook username that was used to log in?
any more ideas?

Setup a third party node.js authentication server

I have two separate applications (app1 and app2 based on MEAN stack) running on my server. I want to add a new application that manages the authentication for both applications. I mean if I try to log in from app1, it redirects me to a login form in auth application, and after login I come back to the previous url in app1. After that, if I go to app2, I'm still logged in.
I'm looking to implement something like similar to the google accounts/ServiceLogin: I can log in one time, and the session remains for almost all google products.
Something important is that I use subdomains for each app: app1.mydomain.com and app2.mydomain.com.
How can I do that using node and express?
Currently I use vhost to manage each subdomain.
You're looking for a single sign on solution.
I'm only familiar with one solution that Stormpath provides, which is called 'ID site'. It's basically a hosted authentication site that handles auth for you, then passes logged in users between your subdomains.
The way it works is like this:
User visits www.yousite.com.
User clicks 'login'.
User is re-directed to login.yoursite.com.
User then logs in.
User is then redirected to dashboard.yoursite.com and is fully authenticated (SSO).
You can implement this quite easily using express-stormpath, here's the relevant docs: https://docs.stormpath.com/nodejs/express/product.html#use-hosted-login

Google Accounts customization in GAE

Well, this question is regarding the authentication system of an app in GAE. I've read several posts and found out the best way to manage the user authentication stuff is using the Google Accounts service. I've read several suggestion (here is one of them) but they don't really give a solution to the problem.
Here is what I want to do: I am going to use the Google Accounts service and I want to know if there is a way to change the login and create account page, so that I don not have to redirect the user to the Google Sign-in form, but rather redirect the user to my own login form and then forward those data to Google Servers. I would like to do the same exact thing with the register form. In conclusion I need that the user feels she is using the login of my application, but is really using the Google Accounts service.
Here is an example of something I want to do: This webpage uses Google Accounts Service, but the login form, is a custom form that then (I imagine) forwards the data to Google Servers and then logs the user in.

Resources