Learn Elm, Jwt and Reactfire

This playlist will be a smorgasbord of Auth0 authentication and authorization topics. Everything from adding Auth0 to various apps, customizing your Auth0 settings, adding specific rules / audiences / features, and debugging errors. 

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

Auth0 Tips and Tricks 

JSON Web Token (JWT) is a low overhead option for authentication that is easy to implement and scales with your application. There is no need to store session data as everything you need is stored in an encoded string sent in the JWT, significantly reducing database overhead for your servers.

In this course, we will build a simple authentication server that will act as a token issuer, and we will use those tokens to access resources on an API.  Starting from scratch, you will learn how easy token based authentication can be and will understand how to use them on your APIs as well as on the front end of your web applications.

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

express

JSON Web Token (JWT) Authentication with Node.js and Auth0

elm-ui is a novel iteration on declarative styling where you can use Elm types and functions to define your UI in a declarative way. The novel part is that it does not require you to know CSS to be used, you can start building layouts right away!

You'll learn how to:
- use a declarative mindset for building UIs
- position elements on the screen
- create layouts with rows and columns
- build a form with elm-ui

Elm is a programming language that provides a clean functional syntax for writing HTML web applications. It promises zero runtime exceptions, fast rendering, time-travel debugging, and much more.

Declarative UIs without CSS with elm-ui

Elm is a beginner friendly functional reactive programming language for building web applications. It contains a small but powerful set of language constructs, such as, static types, algebraic data types, immutability, and pure functions. Elm provides and requires the use of a specific architecture that’s well suited for sensible application construction. Elm’s type system and architecture may feel constraining at first, but they ultimately provide the programmer with some neat benefits including comprehensible code, and a much improved refactoring experience.

In this course you will learn the basic fundamentals of Elm so that you can start building applications today.

Start Using Elm to Build Web Applications

JSON Web Tokens (JWT) are a more modern approach to authentication. As the web moves to a greater separation between the client and server, JWT provides a terrific alternative to traditional cookie based authentication models. For more information on JWT visit http://jwt.io/

In this series, we’ll be building a simple application to get random user information from a node server with an Angular client. We’ll then implement JWT to protect the random user resource on the server and then work through the frontend to get JWT authentication working.

By the end, we’ll have an application which has a single username/password combination (for simplicity) and uses tokens to authorize the client to see the random user information. You’ll be able to login, get random users, and logout.

AngularJS is an open-source JavaScript framework, maintained by Google, that assists with running single-page applications. Its goal is to augment web-based applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.

angularjs

AngularJS Authentication with JWT

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Authentication and authorization doesn't need to be hard. In this lesson, we're going to use the Auth0 React SDK to add authentication to protect a route. Which means that a user has to be logged in in order to access any content on that page. We'll finish the lesson by sending an access token to an Express API in order to retrieve some data. 

Protecting Routes and Calling Secure APIs in React with Auth0

With Auth0's React SDK, integreting an identity provider has never been easier. With a couple changes to your React app, creating an account within Auth0, we can have a login experience ready to go! This lesson will walk through all the steps nesscary such as adding the SDK through npm, setting up your Auth0 account, adding a login/logout button, and using the Auth0 provided hook to access values. 

Adding Login to React with Auth0

Sending a JSON Web Token is one way to valid your identity as a user of an API or service. In this lesson, we will see how to add an Express middleware which will check for a valid JWT and return a 401 Unauthorized error if not.

Add Middleware to Validate a JSON Web Token (JWT)

In this lesson, we will use Auth0 to generate a JWT that we can use to validate future requests to our server.

We will then return that token and test that it works when authenicated by our middleware.

During the lesson, we'll also briefly look at a strategy to keep your credentials out of source control using a .gitignore file. 

Get a JWT From Auth0 in Express to Be Used in Authentication

JSON Web Tokens are an open, industry standard RFC 7519 method for representing claims securely between two parties.

In simple terms, authorization is the process of verifying what users have access to (after authenticating). This video assumes that you already have authentication set up and are ready to add authorization. 

Authentication is the process of verifying if a user is who they say they are. After a user successfully authenticates, access JWTs are issued back to the application. 

In our case of authorization, we are using the JWT (JSON web token) in our NodeJS / ExpressJS API calls, to verify the user has the correct access to the desired resource. 

Authorization in NodeJS with ExpressJS and JWT

Role-Based Access Control (RBAC) is the idea of grouping permissions together by a role. Users are assigned a role through the Auth0 dashboard the corresponding permissions are placed on the user's access token (JWT) after authenticating. That access token can be extracted by an Auth0 SDK (this video uses JavaScipt/ ReactJS) and sent to a custom server. 

Server Side logic (this video is based on NodeJS and ExpressJS), can then check for specific permissions and then allow or reject certain resources. 

-------------

Starting point- https://github.com/twclark0/roles-scopes-node-auth0/tree/roles-beginning

Ending point- https://github.com/twclark0/roles-scopes-node-auth0/tree/roles-final

Role Based Auth in NodeJS with ExpressJS and Auth0

Universal Login is Auth0's implementation of the login flow, which is the key feature of an Authorization Server. Each time a user needs to prove their identity, your applications redirect to Universal Login and Auth0 will do what is needed to guarantee the user's identity.

This video will walk you through how to customize and brand the Universal Login experience. This includes setting a custom domain, styling the user emails, and add your company logo to the form. 

Customize the Auth0 Universal Login

We are going to go ahead and install globally create-elm-app (because it has the best DX so far) and show how would you typically start any production-ready Elm app, and also add elm-ui as a dependency and show the first elements with elm-ui.

Bootstrap an elm-ui Application with create-elm-app

To showcase the power of elm-ui, in this lesson we will show how incredibly easy it is to center an element both horizontally and vertically on a screen with elm-ui, since this is a typical problem while doing regular CSS.

Center an elm-ui Element Horizontally and Vertically

In this lesson we will start to get to know the row and column functions in elm-ui to help us layout our application. We will choose the mobile first approach in which we will display everything in one column, show how to handle two columns and explain that later when we do responsible we will be able to play a bit more with this. Since the concept of margin does not exist in elm-ui, in this lesson we learn how to solve it by using spacing and we will talk about padding in a future lesson.

Model a Layout with row, column and spacing with elm-ui

We will use the pink box element that we had from previous lessons while implementing our fancy dashboard and we will turn it into our Card "component", the piece of UI that we are going to repeat and that will have its own state later on the course. 

To do this, we'll first manipulate the background color and text color, then change the height and width of the card. We will want to change the title for each of the cards and to do so we will accept a title argument that will be passed down to our text element within the card to be displayed.

Use View Functions to Create Reusable Pieces of UI in Elm

Since we mentioned in a previous lesson that there is no concept of "margin" in elm-ui, we are goint to learn how to se `padding`, `paddingXY` and `paddingEach` to compensate for that, and a little trick defining a value edges that is going to be pretty useful.

Use padding, paddingXY and paddingEach with elm-ui

We will style the heading of `viewCards` to look more like a real heading. If you inspect the console right now, you'll find that the `el` element we are using for our text corresponds to a div in HTML. 

We will go further away than using only text to display our content and introduce the modules `Element.Font` and `Element.Region` to fix the headlines and other text of our dashboard, adding an additional "breakdown" heading that is going to serve as a divider between sections.

Style Text with elm-ui Headlines, Typographies, and Fonts

In this lesson, we will explain when you would need to reach for the `text` function, why it is different from `textColumn` and `paragraph` and when to use each one as they serve different purposes for displaying text in the UI. Basically, `el` and `text` elements **do not wrap text by default**, so we need to use `paragraph` when we want text to overflow and still be visible to read. We will add a new "subtitle" section below our Breakdown subheading

Choose between text, textColumn and paragraph with elm-ui

Now that we have our cards more or less looking good lets add a button and style it as well so that it serves as a starting point for our dropdown component, this lesson will also help us to learn how to use the `Element.Input` module from elm-ui.

Work with elm-ui Input Components

Since there is no select or dropdown component backed in into elm-ui, we will be adding another dependency to our project called `PaackEng/elm-ui-dropdown` and adding to it additional styles and settings so that it looks and behaves exactly as we want to.

To make this works, we need to make a few changes:
- We need to add a `dropdownState : Dropdown.State String` to our `Model`
- Add a couple of extra variants to our `Msg` type: `OptionPicked (Maybe String)`, to be dispatched by our dropdown whenever we click on any option, and `DropdownMsg (Dropdown.Msg String)` to update the internal state of the dropdown from the outside.
- Construct our hardcoded list of options of type `List String`.
- Define a `dropdownConfig : Dropdown.Config String Msg` that is going to contain all our customisation of our dropdown.
- Use `Dropdown.view` to display our custom dropdown wherever we need it.

Topics

Instructors

Content Type