I am trying to implement Okta in my app. All tutorials I saw online (even on the docs) has the config in the front-end. Sample config below:
const oktaConfig = {
issuer: process.env.NEXT_PUBLIC_OKTA_ISSUER,
clientId: process.env.NEXT_PUBLIC_OKTA_CLIENT_ID,
redirectUri: 'http://localhost:3000/login',
responseMode: 'query',
response_type: 'code',
tokenManager: {
storage: 'sessionStorage',
},
};
This can be viewed by the user in their browser. I was wondering if this has any security issues? This is how I sign-in the users (we don't use okta's sign-in page):
const oktaClient = new OktaAuth(oktaConfig);
const oktaData = await oktaClient.signInWithCredentials({ username, password });
Any thoughts if it is bad if those issuerId and cliendId are exposed or is that normal?
The issuer and client ID are public information. I like to think of a client ID like a vehicle's license plate. It's just an identifier and doesn't contain any private information. Client secrets are the only thing you need to worry about. They should never be in any frontend code.
Related
I am sending a user to the apple authentication site where they fill in their apple login information on a form:
const signInWithApple = () => {
const params = {
client_id: Config.APPLE_AUTH_CLIENT_ID,
redirect_uri: 'https://www.example-site.com/auth/apple/',
scope: 'name email',
response_type: 'code',
response_mode: 'form_post',
};
const loginUrl = `https://appleid.apple.com/auth/authorize?${queryString.stringify(params)}`;
window.open(loginUrl, '_blank', `scrollbars=yes, width=520, height=570`);
};
After it has authenticated the user, it redirects the user to the URL that is defined in the redirect_uri property. Then I verify the token and log in the user on my end. That works beautifully.
The problem occurs when, instead of opening the window with the form fields, it opens a sheet at the bottom of the Safari mobile browser to allow the user to use face id. If you follow through with that, it looks like it recognizes your face and closes the sheet but it never redirects the user to my URL page where I log in the user after verifying their token.
Has anybody encountered this? I would love some ideas on how to solve this please!
Finally, I use apple auth js sdk to solve this problem, just for safariš„²
Document is here:
https://developer.apple.com/documentation/sign_in_with_apple/sign_in_with_apple_js/configuring_your_webpage_for_sign_in_with_apple
// add this script to your website
<script src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/zh_CN/appleid.auth.js"></script>
// or en_US
<script src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>
// init sdk
window.AppleID.auth.init({
clientId: YOUR_APPLE_CLIENT_ID,
scope: 'name email',
redirectURI: redirectUrl,
state: state,
nonce: String(Date.now()),
usePopup: true,
})
// get auth
const {
authorization: { code, id_token, state },
user,
} = await window.AppleID.auth.signIn()
Good Day everyone,
I'm learning Laravel Passport and Vue.JS(standalone) at the same time.
I'm using Password Grant Token to authenticate the user.
I encounter this issue that the secret_key must be always hidden.
I have this Login Component in my vuejs where I need to add the client_secret as parameter to get access token. However, since VUEJS is a javascript framework. there's a way that someone can see the client_secret on the minified build file.
my question is that, is it just normal? is there a way to conceal the client_secret?
at first I don't mind the issue since I have implemented CORS on laravel where I can only select the allowedOrigins. My thinking is that it doesn't matter if they know the secret key as long as I can filter the allowedOrigins.
Here's my code in VUEJS
login(){
this.$validator.validateAll().then((result) => {
if (result) {
var data = {
client_id: 3,
client_secret: 'client-secret key',
grant_type: 'password',
username: this.inputs.email,
password: this.inputs.password
}
this.$http.post("oauth/token", data).then(response => {
this.$auth.setToken(response.body.access_token, response.body.expires_in + Date.now());
bus.$emit('reload');
this.$router.push('/');
})
}
});
}
Any advice will be appreciated.
Thanks in advance.
Laravel Passport has a built in way of allowing you to consume your own API with a Javascript application. It provides a simple middleware which you can add to your web middleware group (which you'll find in App\Http\Kernel):
'web' => [
// Other middleware...
\Laravel\Passport\Http\Middleware\CreateFreshApiToken::class,
],
Laravel will check to see if you have a logged in user (via the standard cookie/session guard) and if so it will generate JWT for you and store it in a cookie. It will also check for this cookie's presence and validate it when you make requests to your API so you no longer need to pass an access token.
One thing to note however, is that you will need to ensure that you continue to pass your CSRF tokens with your requests (assuming you have CSRF protection turned on). If you're using Axios with Vue, you can make sure this happens very easily with the following:
window.axios.defaults.headers.common = {
'X-Requested-With': 'XMLHttpRequest',
};
With this approach you don't need to worry about access tokens at all or expose a client_id and secret to the client.
I faced the same problem and found an interesting solution.
You can add a custom endpoint on the backend and make the request from there.
All you have to do is to:
First, create a route in the api.php file Route::post('/login', 'AuthController#login');
Then, create the AuthController and login function associated with that route php artisan make:controller AuthController
Finally, install Guzzle, the HTTP client that will allow you to make a request from PHP composer require guzzlehttp/guzzle and make the request from the login function
public function login(Request $request)
{
$http = new \GuzzleHttp\Client;
try {
$response = $http->post('http://example.test/oauth/token', [
'form_params' => [
'grant_type' => 'password',
'client_id' => 2,
'client_secret' => 'your_client_secret',
'username' => $request->username,
'password' => $request->password,
]
]);
return $response->getBody();
} catch (\GuzzleHttp\Exception\BadResponseException $e) {
if($e->getCode() == 400)
{
return response()->json('Invalid Request, Please enter email or password.', $e->getCode());
}
else if($e->getCode() == 401)
{
return response()->json('Your credentials are incorrect. Please try again', $e->getCode());
}
return response()->json('Something went wrong on the server.', $e->getCode());
}
}
Now, the vue.js front end app juste needs to send a post request to http://example.test/login with the username and password to get back the access_token without knowing the client_secret since it is abstracted to the backend.
Here is the video that explains it and implements it really well.
And a presentation about some theory and how you can store and send the token from the vue.js app once you retrieve the token.
Hope this helps.
I need to get all users from my backend (Node.js). But when I am trying to authenticate I've got:
error AccessDeniedException, User ... assumed-role/Cognito_XXXUnauth_Role/ CognitoIdentityCredentials is not authorized to perform: cognito-idp:AdminInitiateAuth ...
My current code:
let cognitoidentityserviceprovider = new AWS.CognitoIdentityServiceProvider()
var params = {
AuthFlow: 'ADMIN_NO_SRP_AUTH',
ClientId: process.env.AWS_CLIENT_ID,
UserPoolId: process.env.AWS_USER_POOL_ID,
AuthParameters: {
USERNAME: '...'
PASSWORD: '...'
}
}
cognitoidentityserviceprovider.adminInitiateAuth(params, (err, result) => { ... })
It looks like I didn't log in since Cognito_XXXUnath_Role is used. Anyone had similar problem?
You are trying to use a Cognito Federated Identity credentials providers to create the CognitoIdentityServiceProvider service client. This will make the AWS SDK to call the Federated Identity service to obtain temporary AWS credentials which will be used to call cognitoidentityserviceprovider.adminInitiateAuth(...).
In this case, there are two possible solutions:
Use a different credentials provider to create the CognitoIdentityServiceProvider client with credentials which have access to call adminInitiateAuth API. Since you care doing this from backend, it should be safe to do so. This guide can help you with this.
If you must use the Cognito Federated Unauth role to create the service client, allow cognito-idp:AdminInitiateAuth in the unauthenticated role of the identity pool you are using to do this.
In case you are using Serverless framework, then the following settings should fix an error:
provider:
# you can add statements to the Lambda function's IAM Role here
iamRoleStatements:
- Effect: "Allow"
Action:
- "cognito-idp:AdminInitiateAuth"
Resource:
- "arn:aws:cognito-idp:*"
I am using Skype Web SDK to get a user's contact list in the following manner.
Skype.initialize({
apiKey: 'a42fcebd-5b43-4b89-a065-74450fb91255',
}, function (api) {
var Application = api.application;
var client = new Application();
client.signInManager.signIn({
username: sip,
password: pwd
})
This works fine when I provide the username(sip) and password. However, when I reload the page, I have to provide the credentials again because the app re-initializes. Is there a way to maintain the user's sessions for a while after the initial login so that the page refreshes wouldn't need ask for credentials again?
I have looked through the samples and docuementation that Microsoft has and couldn't find a way. I've also tried to store the client object in the localStorage after the initialization and sign in, but when I tried to reuse the object from localStorage to get the contact list, it did not work.
http://officedev.github.io/skype-docs/Skype/WebSDK/model/api/interfaces/jcafe.signinmanager.html#signin last example explains that you can store oauth token and use it as unexpired token.
To connect to an existing app's event channel, specify id of that app:
sm.signIn({
username: "user1#company.com",
password: "password1",
id: "273867-234235-45346345634-345"
});
To sign in to Skype for Business Online using OAuth while handling the
logic of retrieving OAuth tokens yourself:
sm.signIn({
client_id: '123-456',
origins: [ 'https://webdir.online.lync.com/AutoDiscover/AutoDiscoverservice.svc/root' ],
cors: true,
get_oauth_token: function(resource) {
// Return a valid unexpired token for the specified resource if you already have one.
// Else, return a promise and resolve it once you have obtained a token.
return 'Bearer eyJ0e...';
}
});
I have js application for which I use keycloak 1.7-final JavaScript adapter with public client and standard flow and it works fine but now I wanted to add offline capability to the application and don't know how to get offline token. according to the documentation the client can request offline token by adding parameter "scope=offline_access" when sending authorization request to Keycloak.
The thing is I don't know where to add the parameter. I tried to add to "keycloak.config" and "keycloak.init" but its not working.
in keycloak.config:
keycloak: {
url: 'link omitted',
realm: 'sisdn-realm',
clientId: 'sisdn',
redirect_uri: 'link omitted',
flow: 'standard',
'enable-cors': true,
scope: 'offline_access'
}
and in keycloak.init
const keycloakConf = require('keycloak')//this is the same config above
var keycloak = new keycloakConf(config.keycloak)
keycloak.init({
onLoad: 'login-required',
checkLoginIframe: false,
scope: 'offline_access'
})
.success(authenticated => {
if(!authenticated)
dispatch(loginFailure())
else {
global.keycloak = keycloak
dispatch(loginSuccess())
}
})
From the JS adapter code:
The init method doesn't accept the scope option, but the login method does.