Crodeon

crodeon

Welcome to HackerNoon’s interview series. This section is curated by our Editorial team to spotlight bold and disruptive startups across the globe. If you’ve been nominated, and answer these questions Startups-Of-The-Year create a brand profile here. Hey Hackers, Crodeon has been nominated in HackerNoon's annual Startup of the Year awards in Ghent, Belgium. Please vote for us here: . Startups in Ghent Read more about us below to understand why we deserve your vote. Meet Crodeon Hi! We’re Crodeon, a leading manufacturer of plug & play end-to-end monitoring systems. We are building Reporter®, the world's easiest sensor device, enabling companies of all sizes to start making use of data. Reporter is compatible with our vast collection of sensors for water, weather, and indoor climate monitoring. The device works autonomously and remotely using an integrated SIM card. Reporter is powered by grid or solar energy, making it the ultimate solution for both indoor and outdoor applications. All sensor data is streamed in real time to our cloud platform, the Crodeon Dashboard. My Role I’m Jonathan, Crodeon’s CEO, head of sales, and your personal contact within the company. Whenever you have a question, I’ll be the one to pick up the phone, answer your questions, and help you create a monitoring kit that fits your needs. I also engage in our marketing, by setting up campaigns to reach potential customers and organize interesting monthly webinars. How We're Disrupting the Food, Agricultural, and Construction Industry We discovered that in many industries a ton of problems could be solved if companies would just have access to more data: measurements gathered and logged through IoT-connected sensors. Bakers need to know if their cold room is working as it should, farmers need to know if the ventilation system in a chicken coop is bringing in enough fresh air, and construction companies need to measure if the humidity of their concrete is correct during the curing process. Access to your own personal data allows you to closely follow up on your processes and improve them where needed. You can automate where possible and save a lot of time by reducing manual labor. Crodeon will disrupt the IoT remote monitoring sector by offering our easy set-up which requires no prior technical knowledge or difficult installation done by tech experts. This means that every small business can instantly start its own data-gathering project with our Reporter. Standing Out From The Crowd What makes Crodeon unique is that we focus on standardization and ease of installation. Many other companies that offer remote monitoring solutions do so by selling over-complicated systems. Systems that require a technician to come in and install them, fumble with many loose wires and add custom software to your computer to see the measurements. Reporter is a plug & play sensor module which means that you just plug your sensor into the device, and it will start measuring right then and there. You don’t need to have a background in tech and won’t need to hire a technician to come to implement the system for you. This eliminates most hurdles that smaller companies deal with when it comes to data-gathering solutions. Reporter comes with a web application that the customer opens through their browser of choice. Custom memory-hogging software is eliminated this way, and it allows you to check in anywhere at any time, through your computer, smartphone, or tablet, for example. In this web app (Crodeon Dashboard), customers can change any Reporter settings they want, set alarm notifications, and view live and historical measurement data. Our Thoughts on the Internet of Things Industry in 2023 We're seeing a radical drop in the cost of cellular connectivity. Some global virtual operators are really challenging the established providers, which is great news for whoever needs 4G/5G connectivity. We're even seeing a few satellite operators joining the party. Connectivity is becoming really affordable. The IoT industry has been helping European companies in the reshoring movement. Many hardware startups have been manufacturing in Europe from day 1 and will keep doing so. By the way, as long as your product design is optimized for easy assembly, then it doesn't matter where you manufacture it. Partnerships are more important than ever. The challenges in IoT are too big to do everything by yourself. At Crodeon as well, we're always on the lookout for new partners like software companies and sensor manufacturers. Complementarity is key in this regard. What word defines the state of in 2023? the Internet of Things Mature. IoT is finally becoming mature. The hype is long gone, and today, the only companies that remain are those that provide real value to real customers. Five years ago, we were still seeing new high-tech innovations popping up every week. Today, companies like us are working towards increased reliability and optimized margins. Innovation is still important, but it's no longer the only thing that makes you win deals. Why we decided to participate in HackerNoon's Startup of the Year awards At Crodeon, we live and breathe tech, so of course we would love to enter, and we’re always up for a challenge! We believe in the power of startups and their revolutionizing ideas and solutions. We can only hope that the community here feels the same way. Final Thoughts Thanks so much for having us! Don’t hesitate to reach out if you have any questions or are interested in becoming a partner. Have a look at our website where we publish lots of interesting content or connect with us on . crodeon.com LinkedIn …and last but not least, don’t forget to vote for us! . Startups in Ghent

Startups of the Year 2023: Crodeon - A Leading Manufacturer of Plug & Play Monitoring Systems

The Abstraction and Reasoning Corpus: Conclusion & References

React Router Flow & Adding TOTP MFA Authentication In , we looked at how to wire up a React application with with an identity provider. In this part, we will use to add a routing and auth flow that will only allow logged in users to view the application while redirecting users who are not logged in back to the sign up / sign in page. Part 1 React Router In Part 1 we used with to set up our authentication. The techniques we will be covering here in part two will work with any authentication provider and are not limited to Amazon Cognito. Amazon Cognito AWS Amplify We will continue from Part 1 with a React project that has an authentication service already added and continue from there. Our application will have a main route which hold forms for both user sign up and sign in. Authenticator The application routes that need user authentication before being allowed to view will be (taken from the ). private route components React Router documentation The component we will end up using will look like this: PrivateRoute The private route will either allow the user to continue to the component, or redirect to auth if the user is not logged in. Here is how this will look once we implement it: The that we will be rendering will not need to know anything about what is going on with Authentication, all of this logic will be handled by the component. component PrivateRoute Let’s put this all together now into a working application. To see the final project code, check out repo this Creating additional project files First, let’s go ahead and create all of the files we will be needing in the next steps. touch Authenticator.js SignIn.js SignUp.js Router.js Home.js Header.js Now that these files are created, we will walk through them one by one implementing the authentication flow. Authenticator component We will be needing a component to handle both the Sign In & Sign up states of the app, . Authenticator.js When the user is not logged in, we will automatically redirect them to this component. This component will have a state that will be toggled to either show the or component that we will be creating shortly. showSignIn SignIn SignUp This is a pretty basic component that allows us to encapsulate both the Sign In and Sign Up forms in one route. This could also be broken up into two different routes, but I’ve found this approach to be a little nicer and more concise. Header.js Let’s create a basic reusable header with some styling that we can use as the application header. Protected Routes Next, we need to create a couple of routes that we will be using as generic protected routes. We’ll encapsulate these two routes in a single file, . Home.js These routes will only be available when the user is logged in. You will notice that we do not have any logic here that looks to see if the user is logged in, all of the logic will be handled by the router implementation. Both of the two routes we create are wrapped with the higher order component that we import from React Router. This is because we want to have access to the history prop from React Router in case we need it, which we will if we want to programmatically send the user to another route. withRouter — Home is a component with only two real pieces of functionality: a method that calls the method to get and store the user’s so we will be able to greet the user by name, and a component that links us to another route. Home componentDidMount Auth.currentUserInfo username Link — This is a basic component that only has a single piece of functionality, a method that calls the method. When the user successfully signs out, we also reroute the user to the route that we will create in just a moment. Route1 signOut Auth.signOut auth SignIn.js We looked briefly at this Sign In functionality in part 1, and here we will be implementing almost exactly the same functionality with one difference: We will hide the confirmation code screen until the user successfully signs in with username and password. We do this to provide a better user experience. This component uses two main methods of the class: and . Auth signIn signUp If is successful, we redirect them to the route using the history prop that was provided to us by from React Router. signIn Home withRouter history.push('/') If the API call is unsuccessful, we log out the error message. SignUp.js We also implemented this exact functionality in Part 1 as far as signing up and confirming the sign up of a user. The main difference here is that we are also adding some logic / UI to only show the confirmation form if fHomethe user has successfully signed up. Router.js Finally, we have made our way to the bread and butter of the functionality of this application, the router. There is quite a bit of important functionality going on in this file, so we’ll walk through it in depth. — The main import to note here is the component. Redirect will navigate the user to a new location, & will override the current location in the history stack like server-side redirects do. We’ll look at how we implement this in just a second. We also import the three main routes that our application will consist of: , , and . Imports Redirect Authenticator Home Route1 — This component will serve as our container for any routes that we want to be protected and only accessed if the user is logged in. PrivateRoute We are initializing a couple of pieces of state in this component: & which are both set to false. loaded isAuthenticated — When the component is first loaded we want to check if the user is currently logged in, and if so allow them to see the route, and if not redirect them to the sign up page. We do this by calling the method. componentDidMount authenticate — authenticate calls the method which will only return successfully if there is a logged in user. If there is a user, we update the state to true and the state to true. If there is no currently authenticated user, we redirect the user to the Authenticator component by calling . authenticate Auth.currentAuthenticatedUser loaded isAuthenticated this.props.history.push('/auth') — We also create a listener to call a function whenever a route changes by calling . Whenever the route changes, this function will fire and we will check if the user is currently logged in. If they are, we allow them to continue and don’t do anything. If they are not logged in, the promise will catch. componentDidMount this.props.history.listen — In , we return a component from React Router. With the component you have three options to render a component, one of them being the prop, which we are using. In the prop, we check to see if the user is currently authenticated, and if so renders the component passed in as the prop, and if not redirects them to the route. render render Route Route **render** **render** component auth — The component defines the routes using either a component for unprotected routes, or a component for protected routes. Routes Routes Route PrivateRoute App.js We are done writing the code to implement the Auth functionality and we can now clean up the App.js file to use the Header and Router we created That’s it, you should be able to run the application and have complete sign up / sign in functionality! About TOTP (time-based one-time passwords) is quickly becoming the MFA of choice for many companies that place a high value on security as it is more secure than MFA with email. TOTP TOTP uses apps like Authy, Google Authenticator & Duo to implement temporary access tokens that expire every 30 to 60 seconds. Cognito and now AWS Amplify have added this feature, so let’s take a quick look at how we might extend our application to implement this. The first thing to keep in mind when thinking about TOTP is that you should not make it the MFA type of choice unless the user specifies that they would like to use it. This is because the adoption of TOTP is still relatively small. The flow should be like this: User signs up, default MFA type is email User signs in, and somewhere in the application (usually in some type of settings area) we give them the option to enable TOTP. User enables TOTP, show them QR code, and enable TOTP with their app of choice Offer the option to change MFA type back to email if the user would like to do so. In our existing app, one place that we could place this functionality in order to demo it could be in the component. Once the user is signed in we will give them the option to add TOTP in this route. Home The way you initially set up TOTP is with the method. This returns a promise that we will use to create a QR Code. Auth.setupTOTP Auth.setupTOTP(user).then(code => /* create qrcode */ ) Adding TOTP to the existing app We will use the qrcode.react package to show a QR Code: yarn add qrcode.react Home.js In , import QRCode: Home.js // somewhere below existing importsimport QRCode from 'qrcode.react' Because needs access to the object, we will need to get the object by calling in componentDidMount and adding it to the state: setupTOTP user user Auth.currentAuthenticatedUser componentDidMount() { // rest of existing code omitted} Auth.currentAuthenticatedUser().then(user => this.setState({ user })) Next, we can add an method that will set the QRCode that we will be using in the QRCode component: addTTOP addTTOP = () => {Auth.setupTOTP(this.state.user).then(code => {const authCode = "otpauth://totp/AWSCognito:" + this.state.user.username + "?secret=" + code + "&issuer=AWSCognito";this.setState({ qrCode: authCode })});} To learn more about how we created the uri and the API behind provisioning a TOTP token, check out link. authCode this We also want to set the preferred MFA type to TOTP for the user. We can do this with the method. Let’s create a new class method that will capture the challenge answer from the user (we will create the input for challengeAnswer in just a moment) and change the preferred MFA type: Auth.setPreferredMFA setPreferredMFA = (authType) => {Auth.verifyTotpToken(this.state.user,this.state.challengeAnswer).then(() => {Auth.setPreferredMFA(this.state.user, authType).then(data => console.log('MFA update success: ', data)).catch(err => console.log('MFA update error: ', err))})} Now, we can add a couple of lines showing the QRCode if it is defined, adding a form to input the TOTP code, and a couple of buttons to attach to the new methods: render() {<div>// previous code omitted<buttononClick={this.addTTOP}style={{ border: '1px solid #ddd', width: 125 }}><p>Add TOTP</p></button>{(this.state.qrCode !== '') && (<div><QRCode value={this.state.qrCode} /></div>)}<br /><buttononClick={() => this.setPreferredMFA('TOTP')}style={{ border: '1px solid #ddd', width: 125 }}><p>Prefer TOTP</p></button><br /><inputplaceholder='TOTP Code'onChange={e => this.setState({challengeAnswer: e.target.value})}style={{ border: '1px solid #ddd', height: 35 }}/></div>} SignIn.js Now, in the confirmSignIn method, we need to update the method to use the type of MFA that is attached to the current user. This information is available in the user object as , which we will pass in as the third argument to : signIn user.challengename Auth.confirmSignIn confirmSignIn = () => {const { history } = this.propsAuth.confirmSignIn(this.state.user, this.state.authCode, )// rest of code omitted} this.state.user.challengeName Now, when we login we can click Add TOTP, scan the QR code and switch our authentication type to TOTP. When we log out, we should now have to use the TOTP provider we used to scan the QR code in order to get back in. To see the final project code, check out repo. this My Name is . I am a Developer Advocate at working with projects like and , and the founder of . Nader Dabit AWS Mobile AppSync AWS Amplify React Native Training Currently I’m specializing in GraphQL with as well as authentication & authorization for applications, so if this interests you follow me for more future info & tutorials! AWS AppSync JavaScript If you enjoyed this article, and share it! Thanks for your time. please clap n number of times Images courtesy of Amazon Web Services, Inc

Stories, News & Mentions about CRODEON

Crodeon’s Stories on HackerNoon