Change User Email/Password in Firebase and React Native

Change User Email/Password in Firebase and React Native

  • For Email/Password Authentication, this can be accomplished with the following code: – reauthenticate = (currentPassword) = { – var user = firebase.auth().
  • currentUser; – var cred =, currentPassword); – return function grabs the current user, creates a credential from the current email and password (which you should ask the user for first) and then calls reauthenticateWithCredential, which returns a promise.
  • Now, we can change the user’s email and password and not have to worry about running into the “this requires recent authentication” error.
  • catch((error) = { console.log(error); }); – }changeEmail = (currentPassword, newEmail) = { – = { – var user = firebase.auth().
  • catch((error) = { console.log(error); }); – }Here, we reauthenticate the user with their current password.

Changing the current user’s email and password in Firebase is as easy as calling .updatePassword(newPassword) on the user object. However, if the user hasn’t logged in recently, you may end up with…
Continue reading “Change User Email/Password in Firebase and React Native”

React Authentication in Depth – Hacker Noon

React Authentication in Depth:  #React #Reactjs #ReactNative #JavaScript

  • First, let’s go ahead and create our React project using Create React App, and change into the new project’s directory: – create-react-app react-auth – cd react-authNext, let’s install React Router and Glamor using either npm or yarn: – yarn add react-router-dom glamoror – npm i react-router-dom glamor –saveAdding the identity providerYou…
  • Next we’ll add user-signin (Amazon Cognito) and deploy the new configuration: – awsmobile user-signin enable – awsmobile pushawsmobile user-signin enable will enable Amazon Cognito in our project with default settings, including 2 factor authentication with SMS (we will add TOTP later).
  • If you would like more control over how your authentication provider is created, you can either pass the -p flag to specify a more detailed configuration (awsmobile user-signin enable -p), or you can go to Amazon Cognito to directly create and configure the service in the console.To see a more…
  • : 2 factor authentication for new user sign up – confirmSignUp(username: string, authenticationCode: string) – signIn — signs in an existing user – signIn(username: string, password: 2 factor authentication for user sign in – confirmSignIn(user: object, authenticationCode: string) – Now, let’s wire this up!
  • When the user signs up using the signUp method, they will receive an authorization code via SMS, and will need to input this value into the form and we will then confirm that this code is correct by calling confirmSignUp: – – Let’s now create the inputs, buttons, and the…

How to do implement world 2 factor authentication (both SMS and TOTP) using React, React Router, and Amazon Cognito In this post, we’ll walk through how to implement real world user sign up and sign…
Continue reading “React Authentication in Depth – Hacker Noon”

Code Splitting with React and React Router

Code Splitting with React and React Router  #reactjs #React #reactrouter

  • Code splitting has gained popularity recently for its ability to allow you to split your app into separate bundles your users can progressively load.
  • In this post we’ll take a look at not only what code splitting is and how to do it, but also how to implement it with React Router.
  • You already split your app into different routes, so adding in code splitting on top of that feels pretty natural.
  • Instead of thinking about code splitting as splitting your app up by its routes, you should think of it as splitting your app up by its components ( s are just components, after all).
  • You already know how to dynamically import modules with , now you just need to figure out which components in your app you can hold off downloading until your user needs them.

Code splitting has gained popularity recently for its ability to allow you to split your app into separate bundles your users can progressively load. In this post we’ll take a look at not only what code splitting is and how to do it, but also how to implement it with React Router.
Continue reading “Code Splitting with React and React Router”

GraphQL Authentication with React Native & Apollo [Part 2/2]

GraphQL authentication with React Native & Apollo  #GraphQL #ReactNative #Apollo

  • We’ll use gql to write our graphql query and the graphql higher order component to tap into the Apollo client.We know that our mutation looks something like this (from working with it directly in Launchpad in part 1).
  • Now we need to to be able to pass variables from our user to the mutation.Finally, we want to make this mutation available to the Register component via this.props so that the component agnostic from the Apollo bindings.Now to use it we’ll go to the end of our handleSubmit function…
  • Click “Log Out”, refresh the app, and you’ll see it no longer brings you to profile.Login with Email and PasswordLogging in with email and password is just like sign up, we’re just calling a different mutation.
  • I’ll let the code do the talking.Now to call the login function available on this.props, save the JWT and change screens (on success) or show an error.Showing User InformationThe final thing we’ll do, to demonstrate that things are actually working and it’s not just a big facade, is show the…
  • The server is expecting the JWT to be coming in the authorization header and uses that to find the current user.To pass this token along with the request we’ll use setContext from the apollo-link-context which is another apollo link we’ll use.

This is the second and final part of a series where I cover how to setup authentication with React Native, GraphQL, and MongoDB. Below is part 1 where we setup the server. In this part we’ll be…
Continue reading “GraphQL Authentication with React Native & Apollo [Part 2/2]”

Rethinking drag and drop – Alex Reardon – Medium

  • We at Atlassian have recently released react-beautiful-dnd which makes drag and drop for lists on the web more beautiful, natural and accessible.PhysicalityThe core design idea of react-beautiful-dnd is physicality: we want users to feel like they are moving physical objects around.
  • It’s drag and drop mechanism is fairly standard and serves as a good reference point.Movementinstant movement is standardWhen dragging items around, other items disappear and reappear as needed.
  • At no point is an item instantly moved anywhere — regardless of whether it is dragging or not.Knowing when to moveIt is quite common for drag and drop interactions to be based on the position that user started the drag fromimpact based on selection pointIn this example the user is grabbing the top…
  • Put another way: once the centre position of an item (A) goes over the edge of another item (B), B moves out of the way.AccessibleTraditionally drag and drop interactions have been exclusively a mouse or touch interaction.
  • We add a tab-index to draggable items to ensure that even you are not wrapping something that is usually interactive (such as a div) then the user will still be able to access it with their keyboard to drag it.Not for everyoneThere are a lot of libraries out there that allow…

We have recently released react-beautiful-dnd which makes drag and drop for lists on the web more beautiful, natural and accessible
Continue reading “Rethinking drag and drop – Alex Reardon – Medium”

Modern static site generation

  • There is this function called Server Side Rendering where you can produce static HTML content directly from a tree of React.js components.
  • At the time of reading this, this site will already be served by GitHub pages and the content you will see once you view the source it’s been generated by Gatsby.js.
  • Here’s my list:

    At the time that I started following them, all of them were in a very early stage and none of them could generate my site’s content the way I wanted and in the same way as my previous one so to not lose paths and certain functionalities.

  • Think of when you are caching the home page of a WordPress powered site and you are serving the cached content to every visitor.
  • Imagine that instead of having memcached caching your HTML in front of your WordPress site, you trigger a hook each time your database changes that will re-generate the frontend using Gatsby.

In this post, I will talk about static site generators. How they have evolved and why I switched from a Ghost powered site to Gatsby.js, a modern static site generator.
Continue reading “Modern static site generation”

A Year of React Native: SSL Pinning – Made by Many

Notes on #ReactNative: on SSL pinning by @samueljmurray

  • When your app initiates this communication, your backend sends its certificate (which contains the public key).
  • Your app then checks that the certificate has been signed by a Certificate Authority (CA) that is trusted by the user’s device.
  • SSL pinning narrows these avenues of attack by letting you define the exact certificate or public key that your app will accept when communicating with your backend.
  • If you use a service like AWS Certificate Manager or Let’s Encrypt your certificate and public key could change at any time.
  • TrustKit also comes with a handy tool for extracting public keys from certificates and converting them to Base64 encoded SHA256 hashes.

We’ve been using React Native for over a year now and we’re loving how quickly we can create feature-rich and performant apps for iOS and Android. So far w…
Continue reading “A Year of React Native: SSL Pinning – Made by Many”

Building an app: React Native vs Ionic – Hacker Noon

Building an app: React Native vs #Ionic  #ReactJS #JavaScript

  • In this article, we are going to make a comparison of two frameworks, React Native and Ionic, based on our real time experience in frontend development.When developing various products, either for ourselves or for the clients, there has always been a question that interested us: how can we narrow down time and cost of product development.Android and especially iOS developers have always been valued greatly and cost a lot, and when developing for two platforms one has to spend twice as much money.At some point we were experimenting with Cordova, but it didn’t feel as if we can get something valuable out of it.Then we noticed Ionic.
  • Now we would like to give you detailed frameworks comparison and explain you why React Native is better solution for our developers.We were always trying to get more expertise on different technologies and use them in practice in order to define the best solution.
  • We also kept on watching Ioinc2, which was supposed to become an innovation that would solve many issues that we had while working with Ionic1.The approaches of given frameworks are very different but for us React Native is an ultimate winner.We chose main React Native advantages that are superior in relation to Ionic1/2:Response time that could be compared to native apps.Ability to reuse the code parts (not all code) for desktop (web apps) and mobile (mobile apps) and even for the server.
  • (:-))Incredibly convenient toolchain for developers that allows to quickly develop and debug the app.Big amount of elaborated components from Facebook.Even bigger amount of components from community.Ability to realize the ideas of functional programming in development which ensures great stability and reliability of the app and relative scaling simplicity.However, we don’t make a point here that React Native is 100% perfect.
  • We also chose some of React Native disadvantages in comparison with Native Apps:Those code parts that are linked to work with hardware solutions, camera, external libraries integration, etc are still done in Native parts.The interface between javascript and native part is not so simple (but not more complicated than cordova).

When you start to use new technology, you cannot be sure it will be the best solution. In this article, we are going to make a comparison of two frameworks, React Native and Ionic, based on our real t
Continue reading “Building an app: React Native vs Ionic – Hacker Noon”

The Three Pigs: how to structure your React-Redux application – Frontend Weekly

The Three Pigs: how to structure React-Redux application  #react #redux #javascript #reactjs

  • /src /components /containers /actions /reducers /sagasThis is the obvious layout and the one that’s most people’s go-to: group the same ”type” of things together.
  • Besides, some things just belong together: you’d never use the ToDoItemList container with a different component so should they really be living in different parts of the codebase?The Wooden House: Group by FeatureIn the second project, having learned some good learnings from our straw house approach, we decided to do a 180: rather than separating all of our Redux bits based on what they do, we grouped them all together by the feature in which they belong.
  • /src /components /PureComponent1 index.js index.spec.js style.css /PureComponent2 index.js index.spec.js style.css /PureComponent3 /features /feature1 component.js container.js actions.js reducer.js saga.js /feature2 /feature3This layout minimises jumping around in the codebase when developing features.
  • It is also easy to end up with just one or two bulky “features” that encompass the entire application.The Stone House: Group by FunctionThe stone house layout basically appeared by letting the codebase grow naturally.
  • We are now 4 months into the project and this is what we’ve come up with:/src /components /Component1 index.js — may be a pure component or a component wrapped in a container, the consumer doesn’t care anyway index.spec.js /Component2 /Component3 /reducers index.js /Reducer1 index.js — actions are in the same file as reducers index.spec.js someSideEffect.js — we use redux-loop here /Reducer2 /Reducer3Whereas this way of laying out the application may look a bit hard to grasp initially, it’s worked out really well for us so far.

Defining any kind of “good practices” in tech is always a tricky business. Good practices are subjective, heavily dependent to your ways of working and often your personal preference. The best we can…
Continue reading “The Three Pigs: how to structure your React-Redux application – Frontend Weekly”

Why props are your friend!

Why props are your friend! => 

{ Story by @RockChalkDev }

🍻 #ReactJS #JavaScript

  • The way this works is that when the user comes to the Home page they are greeted with four images that represent their respective collection.
  • When the user selects one of the four images on the Home page an async method, , is called.
  • This function is responsible for two things:

    When the user gets to the Portfolio page they are greeted with a Carousel displaying the images.

  • The Porfolio component is connected to the Redux store so it has access to the app state in our case we want .
  • Below you an see what looks like on a user’s selection:

    The Redux store doesn’t have that information avaliable in state.

This the first time I’ve ever done a blog post, I guess this is a blog post. I wanted to share this because I’m pretty impressed with my use of props &.
Continue reading “Why props are your friend!”