I am developing React js app where the user can log in using google account , I want to retrieve the registered phone number for the user by using firebase login.
I have followed this tutorial to make the login flow
https://github.com/firebase/firebaseui-web-react
my question is : Can I get the phone number of the user when he/she
logged into my system using google email ?
this is part of the code I use to login
firebase_ui_instance.start('#firebaseui-auth-container', {
signInFlow:'popup',
signInOptions: [ {
provider: firebase.auth.GoogleAuthProvider.PROVIDER_ID,
// Required to enable this provider in one-tap sign-up.
authMethod: 'https://accounts.google.com',
scopes: [
'https://www.googleapis.com/auth/plus.login',
'https://www.googleapis.com/auth/userinfo.profile',
'https://www.googleapis.com/auth/user.phonenumbers.read'
],
customParameters: {
// Forces account selection even when one account
// is available.
prompt: 'select_account'
},
// Required to enable ID token credentials for this provider.
// This can be obtained from the Credentials page of the Google APIs
// console.
clientId: '[MY_CLIENT_ID]',
credentialHelper: firebaseui.auth.CredentialHelper.GOOGLE_YOL
}
I was able to get many info about the user(email,full name...) but not the mobile number...
Have you tried the API on this page and tried to execute the query on the right hand side?
https://developers.google.com/people/api/rest/v1/people/get
You'll get the access token and you'll need to use to make the API call.
Related
I am building a Microsoft Teams tab app (https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/what-are-tabs) using React JS. My application has a login form that logs user in with Teams asking for additional permissions then send the access token back to the backend. My login form is working fine on Web and Desktop app version of the MS Teams. But it is not working on IOS MS Teams app.
This is how I login the user.
import {TeamsFx} from '#microsoft/teamsfx';
// rest of the code hidden
try {
let teamsfx = new TeamsFx();
const credentials = await teamsfs.getCredential();
const accessToken = await credentials.getToken([ 'Group.Read.All', 'User.Read' ]);
} catch (e) {
console.log(e.message)
}
when I login on the IOS Teams app, I am getting this error.
Unable to generate the SSO token: App is neither whitelisted nor app resource matches current domain.
What is the potential cause of the issue and how can I fix it?
You need to set the app uri id as api://{fullDomain}/{appId} for you to be able to get tokens. And because you’re getting extra permissions, you need to make sure you are getting consent.
I am using Azure AD with React JS. When I am signed in using multiple accounts and call msal logout, then it is showing me an option to select an account that needs to be signed out. I just want to show the logout option for the currently active account, rather than all signed-in users.
I have tried to pass an active account using the below snippet but still, I am getting an option to logout all signed-in accounts. Can you please let me know how can I get an option to logout only active account, rather than all signed-in accounts?
const myMsal = new PublicClientApplication(config);
// you can select which account application should sign out
const logoutRequest = {
account: myMsal.getAccountByHomeId(homeAccountId)
}
myMsal.logoutRedirect(logoutRequest);
https://learn.microsoft.com/en-us/azure/active-directory/develop/scenario-spa-sign-in?tabs=javascript2#sign-out-with-a-redirect
You can use Prompt-less Logout:
const currentAccount = msalInstance.getAccountByHomeId(homeAccountId);
// The account's ID Token must contain the login_hint optional claim to avoid the account picker
await msalInstance.logoutRedirect({ account: currentAccount});
You will need to add login_hint claim to token optional claims in your application's Token configuration on Azure Portal:
msal logout it is shows an option to select an account that
needs to be signed out
The logout prompt you're seeing comes from the AAD service, because it needs to know which user to terminate the session for on the authentication server side
Unfortunately, this is a known issue with the AAD service. At this time, there is no way to bypass the logout account selection screen on logout
According to this document : https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/logout.md and code descriptions, MSAL is clear the cache and session data on the client side (browser)
There is github issue you can refer it for more details :
https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/2922
i am trying to set AWS Cognito as Auth provider to log in salesforce.
I have set up an "Auth Provider" (called it Cognito) enabled it as login option both for salesforce login and for community (in community workspace).
Auth provider settings
When i try to login to salesforce using Cognito credentials i manage to do it without issues, but when i click on "Cognito" as a login option in my community i get an error even before i try to enter my credentials:
Trying to log in
Error and url string
I use different credentials for user that is internal and user that is external, although in case of community login i did not even manage to enter my creds. In url string i see that error is "redirect_mismatch" but i am not sure what that means in current context and how to resolve it. In my Registration helper i have only adjusted "createUser" method to return a user that i already have in my org:
global User createUser(Id portalId, Auth.UserData data){
return [SELECT Id, Name, ContactId FROM User WHERE FederationIdentifier = :data.email];
}
If someone has experience with using Cognito as auth provider for salesforce communities i will be glad for any help.
Redirect mismatch is referring to your callback URL being different than the one you defined in your user pool settings. Go to user pool settings and click on app client settings. Here you will see fields for sign in and sign out urls. Put in the correct callback/redirect url here. You can enter multiple urls separated by commas.
For a small app catering to a very small set of users, we are planning to implement magic link authentication. The user would come to the application, enter their email address, get a magic link on the email address, after the user clicks on the link, they are logged in to the app.
I am not able to find enough resources to figure out how to do it in a SPA. Here are some helpful links:
Magic Link with Node
https://medium.com/#aleksandrasays/sending-magic-links-with-nodejs-765a8686996
https://medium.com/one-more-thing-studio/how-to-make-magic-links-with-node-1d164c036e29
Magic Link with Auth0
https://auth0.com/passwordless
This is the SPA workflow that I have in mind:
User comes to the SPA
The SPA takes the user to the login page where they can provide their email address.
The SPA sends the email address to the backend api
The api decides whether or not the user is registered, and sends them an email with a short lived jwt.
Clicking on this link takes user to a SPA route with the jwt in query params.
The Frontend forwards this jwt to the api backend, and the api backend verifies the jwt and sets a cookie
This cookie can then be used to maintain the user session.
I want to verify this workflow, but I am not able to find enough resources.
Specifically, I want to clarify whether the magic link should send the user to the SPA and the SPA should be responsible for extracting the jwt and sending it to the API backend, or is there another way to do it?
Is this how this should be implemented? What are the security implications?
I am using react and react-router.
Cotter co-founder here.
We have a super easy magic link integration for React. Here's a guide to set up a Simple Magic Link Login for your React App.
You can integrate magic link login in 2 steps:
1. Add dependencies
yarn add cotter
2. Show the log in form
(step 2-4 in your flow)
import React, { useEffect } from "react";
import Cotter from "cotter"; // 1️⃣ Import Cotter
function App() {
useEffect(() => {
// 2️⃣ Initialize and show the form
var cotter = new Cotter(API_KEY_ID); // 👈 Specify your API KEY ID here
cotter
.signInWithLink() // use Magic link
.showEmailForm() // show email login form
.then(resp => console.log(resp))
.catch(err => console.log(err));
}, []);
return (
// 3️⃣ Put a <div> with id "cotter-form-container"
// that will contain the form
<div id="cotter-form-container" style={{ width: 300, height: 300 }} />
);
}
export default App;
You can create your API_KEY_ID here.
Done! Now you should have an email Login Form that sends a magic link to your users. Here's a working example.
The response
After the user click the link (step 5), you'll receive the following response in then((resp) => console.log(resp)):
{
"email": "youremail#gmail.com",
"oauth_token": {
"access_token": "eyJhbGciONiIsImtiJFUzI1pZCI6...",
// you'll also get a refresh token and an id token
},
"user": {
"ID": "abcdefgh-1234-5678-1234-f17786ed499e", // Cotter's User ID
// More user information
}
}
You can then send this response to your backend server and do the following steps: (step 6-7 in your flow)
Verify if the access_token (a JWT token) is valid.
If it's valid, you can register the user if the email is not recognized (you should also associate the email with Cotter's user id).
You can use the access_token for all your API endpoints, or you can generate your own session and set a cookie
Checkout this Reack Hook use-magic-link to integration Magic Link very quickly into a React app.
Read this article for more info: Simple Auth Setup for Your React App
This is the workflow for magic link:
When a user enters the email address, Magic sends verification link to the email address to verify that email. When you click on "Confirm your email", a modal will show up to log in to the app. When the user click on the "Log in to app", Public+Private keys are generated and stored on the browser. That means users own their own identity. This key pair is in embedded iframe and inaccessible to the developer in order to protect the user's private key.
Since those keys are generated on the user's client instead of magic servers, Magic will not be able to see those secrets.
Magic sdk will use that private key to generate auth token. This auth token is called DID token (Decentralized Identifier). When you decode this token, you can see the user's email address and when it was issued. Essentially, DID token is your digital signature. If we store this token in our database and if our database gets hacked, malicious users will not be able to access our private key. Then we pass this DID token to the server to check the user
Magic stores the user's email and id in indexedDb. It also stores some cookies for itself, to function properly
to work with magic, you use magic-sdk. You set the magic client ✨
import { Magic } from "magic-sdk";
const createMagic = () => {
return (
new Magic(process.env.API_KEY)
);
};
export const magic = createMagic();
then using this client:
// you have input and captured the email
if (email) {
try {
// this store public/private key on browser and returns the DID token
const didToken = await magic.auth.loginWithMagicLink({
email,
});
if (didToken) {
// once you have the token, using metadata, you can add another propertis
// iat, exp, roles etc
// then sign this with jwt
// store the token in browser
}
I'm implementing a hybrid iOS web and native app. I'm using iOS native FB login capabilities, and sending the access_token from the native app to the web, which uses Satellizer.
The question is: can I avoid the FB permissions dialog and directly use the access_token to sign up the user and recover the JWT from the server, using the normal Satellizer flow?
Permission dialog is a must for every third party social login.
The user need to approve and to know what application he is going to use with that social network and what permissions he will give to that specific application.
I solved it doing Satellizer job of sending the access_token and storing it manually:
$http.post('/auth/facebook', {
token: receivediOSToken
}).then(function (response) {
$auth.setToken(response.data.token);
loginSuccess();
}, function () {
loginError();
});