So I have working app hosted on aws as static website. Currently it is publicly available, but I wanted to have authentication mechanism, so when user is not currently logged in it will show him login page instead. From following the aws documentation it seems that process requires to have some of additional front end frameworks such as react, vue etc? Is it possible to just use plain javascript to achieve the same results?
You can use the built in components for React, Vue and Angular.
If your app does not use these frameworks, its still possible to use vanilla js.
You need to import
import { Auth } from 'aws-amplify';
Then you can use the methods on the Auth class (https://aws-amplify.github.io/amplify-js/api/classes/authclass.html) independent of the react etc. controls.
For example, to sign up, you would use Auth.signUp and to sign in, you would use Auth.signIn
The AWS documentation for this is at https://docs.amplify.aws/lib/auth/emailpassword/q/platform/js
Related
In this I have created a flask login portal using flask-login and wtforms.
But my project requires me to develop the frontend using vueJS and not just rendering HTML. Unfortunately, I am unable to find a way to pass the FlaskForm onto the VueJS file so that I can use it in the template. I am not able to Jsonify the FlaskForm object. It would be really nice if someone could help me on this one.
I am using AWS Amplify Authentication on my React Native app using the withAuthentication HoC. I would like to implement federated signin with Google and Facebook which has already been configured on these platforms. Unfortunately I have no idea how I implement social media buttons on the AWS UI component; AWS documentation suggests that configuration is passed to the HoC, but no further information is provided...
export default withAuthenticator(App, {
// display federation/social provider buttons
federated: {myFederatedConfig},
})
Your help would be much appreciated!
I am running into an issue between react native and the endpoint I have setup for the redirect_uri. For the process flow, currently the user is taken from the app to the browser where the fitbit authorization page appears. So far so good. The user selects the permissions that want to allow and from here the redirect_uri points to an express endpoint that saves the information into a database. After this step I would like to redirect the user back to the react native app to continue, instead it just displays the success message that comes from the endpoint in the mobile browser. How can I redirect the user back to the application once the endpoint has finished processing?
What you're asking about is called deep linking.
To open your native app from a browser:
Your native app needs to define a URL scheme that other apps can use to target it.
Your browser-based code needs to redirect to a URL using your app's scheme.
And, most likely:
Your app needs a listener for the deep-link. If you don't write a listener, your app will open, but there would be no way for you to pass information into the app from your browser-based code.
Here is a crude example, as a starting point. I would encourage you to go read the docs thoroughly, because deep-linking is a lot more complicated than first glance. :)
React Native
First, create the my-excellent-app:// scheme for your app as explained here. If you're using Expo, this becomes even easier.
Then, add the listener as early as possible in the life-cycle. Like most of the documentation on this explains – usually in your top-most component in App.js or index.js.
import { Linking } from 'react-native';
import URL from 'url-parse';
// Make sure to only add this listener once!
// Adding it more than once will trigger the handler more than once. ;)
Linking.addEventListener('url', ({ url }) => {
const deeplink = URL(url, true);
console.log(deeplink.query);
});
Web-stuff
I'm not sure exactly what tech stack you're using, but the concept is simple enough: do whatever you need to do on the server, and then redirect the browser back to your app's custom scheme.
In Express, that would be something like:
res.redirect('my-excellent-app://myCustomLink?other=data&using=UrlParamsGoesHere');
Lastly, there are third parties like Branch that also handle quite a lot of this, and more.
I am trying to test a react native app on android which uses a native library which does oauth-based authentication using a webview. Detox does not support webviews (yet) so I was wondering if I could tap on the keyboard using coordinates in order to get through the auth (bad I know, but gets me unstuck for now).
Since the oauth screen is outside your app, I'd recommend you do the following:
Create E2E tests for your login up to the oauth screen
Get a CLI for your oauth provider or figure out how to authenticate via node.js to get the auth token
Create a deep link path in your app that accepts the token as a param and stores it the way you'd store it normally and trigger a continuation of the login flow (you may need to reverse engineer your native lib slightly)
This is generally the approach you want to take if you are using an external authentication party. If the party providing the auth package doesn't support 2 and 3, you should raise the issue with them.
I am trying to implement OAuth into my react native app.
I am using react native app auth.
I would like to make scope as optional.
Currently, it is mandatory.
How do I do that?
Can I modify the code of react native app auth and build it and import into my Example code?
React Native app auth - Github Link
One of the maintainers of react-native-app-auth here.
Up until this moment I was under the impression that the scope parameter was a required paramater in the OAuth 2.0 request spec, but looking at the relevant spec definition, it appears to be optional.
You should be able to remove the array.length check in the validateScopes helper. You can try this by editing the index.js file in your app's node_modules/react-native-app-auth/ directory.
Once done, you can pass an empty array [] as scopes.
I'm not sure how the underlying AppAuth native libraries deal with it, but if it works, you can open a PR to react-native-app-auth and I'm happy to accept the change.